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

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"><br />$(window).load(function() {<br />$('#slider').nivoSlider({<br />effect: 'fold', // Specify sets like: 'fold,fade,sliceDown'<br />slices: 15, // For slice animations<br />boxCols: 8, // For box animations<br />boxRows: 4, // For box animations<br />animSpeed: 500, // Slide transition speed<br />pauseTime: 3000, // How long each slide will show<br />startSlide: 0, // Set starting Slide (0 index)<br />directionNav: true, // Next & Prev navigation<br />controlNav: true, // 1,2,3... navigation<br />controlNavThumbs: false, // Use thumbnails for Control Nav<br />pauseOnHover: true, // Stop animation while hovering<br />manualAdvance: false, // Force manual transitions<br />prevText: 'Prev', // Prev directionNav text<br />nextText: 'Next', // Next directionNav text<br />randomStart: false, // Start on a random slide<br />beforeChange: function(){}, // Triggers before a slide transition<br />afterChange: function(){}, // Triggers after a slide transition<br />slideshowEnd: function(){}, // Triggers after all slides have been shown<br />lastSlide: function(){}, // Triggers when last slide is shown<br />afterLoad: function(){} // refer to http://docs.dev7studios.com/jquery-plugins/nivo-slider for additional documentation<br />});<br />});<br /></script>

    <div class="slider-wrapper theme-default"><br />
        <div id="slider" class="nivoSlider"><br /><img src="$image1_path" alt="$image1_alt_text" title="$image1Caption" /><br /><img src="$image2_path" alt="$image2_alt_text" title="$image2Caption" /><br /><img src="$image3_path" alt="$image3_alt_text" title="$image3Caption" /></div>
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
<br /><strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>