In our templates that include a sideshow, we prefer using the Nivo Slider. It has been around a long time, gone through several updates,
and is very reliable. It is also cross-browser friendy, responsive, and free to use. That makes it perfect for our needs.
Nivo Slider
The instructions page in your template will give details on the required image sizes and how to change
the caption text on each image. It is important to note that the slideshow in your template may only use one image. That makes it look like
only the caption changes. You can, of course, add different images.
<div class="nivo-caption1">What does your web site say about your business?</div>
</div>
<div id="htmlcaption2" style="display:none">
<div class="nivo-caption2">Easily replace our sample images with your own.</div>
</div>
<div id="htmlcaption3" style="display:none">
<div class="nivo-caption3">This text is easy to change. Be creative.</div>
</div>
Some items of note:
Keep your caption text short. Long lines of text will cause issues in smaller devices. If you wish to remove the captions, leave the
title portion blank and remove the divs containing the captions.
In some older templates, the slideshow needs to be changed on the homepage.dwt template. The instructions will tell you if this is
the case.
In some older templates, the caption is placed within the title portion: title="your text goes here". Refer to the template's
instruction page for information.
To change the slideshow effect or speed
You can edit the javascript to change the image transition effect and the animation speed. It will be in the main.js for newer templates or in slideshow.js for older ones. Again refer to the template's
instructions page.
Slideshow javascript controls
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fold',
slices: 25,
boxCols: 15, // For box animations
boxRows: 8, // For box animations
animSpeed:2000,
pauseTime:7000,
directionNav:false,
captionOpacity:0.80, //Universal caption
opacity
controlNav:false,
keyboardNav:false,
pauseOnHover:false
});
});
//The effect parameter can be any of the
following:
