Blog

We have added the Nivo Slider scripts to our asset library inside our template repository. Which means you should NOT download a copy and try to add it to a website. If you choose to use Nivo Slider, please follow these directions:

1. Go to Website Settings
    
2. Add the Javascript by Clicking “Add Page Setting” Enter
   (Section | Token | Value):
   Javascript | nivo-slider | /sbtemplates/sbcommon/js/nivo-slider/jquery.nivo.slider.pack.js
3. Add the CSS by Clicking “Add Page Setting” Enter
   (Section | Token | Value):
   Stylesheet | nivo-styles-1 | /sbtemplates/sbcommon/css/nivo-slider/nivo-slider.css
4. Add the CSS by Clicking “Add Page Setting” Enter
   (Section | Token | Value):
   Stylesheet | nivo-styles-2 | /sbtemplates/sbcommon/css/nivo-slider/themes/default/default.css
5. Your site now has full access to nivo js and styles (themes) 
    
6. Add your html markup to the page slot (example):
   
   
7. Call your nivoSlider function inside the customer.js file:
   $(window).load(function() {try{ $("#nivoSlider").nivoSlider({ effect: 'random', pauseTime: 7000 });} catch {}});
8. or if you want to additional nivo options or click here:
   // 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(){} // Triggers when slider has loaded
9. If you need to add multiple nivoSliders
   Add the javascript code above but change #nivoSlider to #nivoSlider2, #nivoSlider3, #nivoSlider4, etc.
   Make sure to change the id in the html markup for the different slider as well.

PS – jQuery 1.8.3 is available with every site, so no need to add it!