Sometimes a simple list isn't enough, and you want some fancy effects. Some common effects include sliders (in which a series of images or other content slides across the screen horizontally based on navigation controls), carousels (much like a slider but with automatic cycling in an infinite loop) and faders (in which a series of images are shown in one spot in series, each fading out to display the next). To achieve these, WSN includes bxslider. This offers a variety of different effects with fairly simple implimentation, and is responsive to different screen sizes. Please note this guide requires WSN 8.0 or later.
WSN uses a slider at the top of the front page. To create your own custom sliders, faders or carousels go too Admin -> Themes -> Manage Templates -> "Additional Document Ready Function Content". This is where we'll set the parameters for what type of sliders we want, based on the examples and options. For illustrative purposes we'll make one regular slider, one carousel and one fader:
if ($('#carousel').length) $('#carousel').bxSlider({ minSlides: 3, maxSlides: 5, slideWidth: 300, moveSlides: 1, auto: true })
if ($('#fader').length) $('#fader').bxSlider({ mode: 'fade', auto: true, controls: false });
Be sure to check out all the options at http://bxslider.com/options to build the right slider for your needs, and ask WSN support if you have any trouble.
Finally it's time for the HTML. Open up the template you'll be wanting to display in. Here's sample HTML for the three sliders we made above:
<h2>10 Sponsored Articles Slider</h2>
<ul id="regularslider" class="slider">
<!-- BEGIN TOPLIST -->
<CONFIG>links[,]rand()[,]10[,]ascending[,]type='sponsored'[,][,]0[,]0[,]0[,]0[,][,]0[,]0[,][,]0[,][,][,]</CONFIG>
<li>
<div style="width: 100px">
<IF {LINKNUMIMAGES}>
<a href="{LINKDETAILSURL}">{LINKIMAGE[95 <,> 70]}</a>
<br >
</IF>
<a href="{LINKDETAILSURL}">{LINKTITLE}</a>
</div>
</li>
<!-- END TOPLIST -->
</ul>
</div>
<div style="width: 100%; margin-left: 50px;">
<h2>10 Sponsored Articles Carousel</h2>
<ul id="carousel" class="slider">
<!-- BEGIN TOPLIST -->
<CONFIG>links[,]rand()[,]10[,]ascending[,]type='sponsored'[,][,]0[,]0[,]0[,]0[,][,]0[,]0[,][,]0[,][,][,]</CONFIG>
<li>
<div style="width: 300px;">
<IF {LINKNUMIMAGES}>
<a href="{LINKDETAILSURL}">{LINKIMAGE[95 <,> 70]}</a>
<br >
</IF>
<a href="{LINKDETAILSURL}">{LINKTITLE}</a>
</div>
</li>
<!-- END TOPLIST -->
</ul>
</div>
<h2>Fader for Article Details / Article Bit / New Articles Templates</h2>
<ul id="fader" class="slider">
<!-- BEGIN TOPLIST -->
<CONFIG>attachments,time,50,ascending,type='link' AND objectid={LINKEFFECTIVEID} AND (filetitle LIKE '%.jpg' OR filetitle LIKE '%.jpeg' OR filetitle LIKE '%.png' OR filetitle LIKE '%.gif'),,,0,0,0,0,0,0,,0</CONFIG>
<li><img src="{ATTACHTHUMBURL[375 <,> 275]}" style="width: 375px; height: 275px;"></li>
<!-- END TOPLIST -->
</ul>
Please note that you must include class="slider" on your elements, this alerts WSN to call in the appropriate javascript/css to the page.
To change the internal content (which articles are shown) of your slider, fader or carousel use the toplist generator at Admin Panel -> Themes -> Toplist Generator to describe what content you want.