Panel Slider

Below are the configuration settings used to create the sample panel slider widget shown above. This is a model that you can use as the basis for your own widgets. 

Content

The following fields are to support a three panel slider with captions for each slider

Field NameField Type
image1image
image1Captiontext
image2image
image2Captiontext
image3image
image3Captiontext

Resources

The javascript and CSS powering this slider come from the Nivo Slider, a commonly used, free jQuery plugin.  It can be downloaded from the Dev7studios website.  The following resources were then uploaded to the theme.

Javascript Resources

/web_resources/themes/percussion/js/jquery.nivo.slider.pack.js  

CSS Resources

/web_resources/themes/percussion/css/nivo/default/default.css

Display

This is the HTML needed to render the widget:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fold', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // refer to http://docs.dev7studios.com/jquery-plugins/nivo-slider for additional documentation
});
});
</script>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="$image1_path" alt="$image1_alt_text" title="$image1Caption" />
<img src="$image2_path" alt="$image2_alt_text" title="$image2Caption" />
<img src="$image3_path" alt="$image3_alt_text" title="$image3Caption" />
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

Leave a comment

*
*