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. 


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

Field NameField Type


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


CSS Resources



This is the HTML needed to render the widget:

<script type="text/javascript">
$(window).load(function() {
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 for additional documentation
<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 id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

Leave a comment