Quick Tip: Auto play your Banners, Slideshows & Carousels

All banners, carousels and slideshows found in our themes use a JQuery plugin called Slick Carousel. You can find out more about the options for this carousel here: http://kenwheeler.github.io/slick/

Auto Play a Banner Component

Step 1

To auto play the Banner you should follow these steps:

Login to CMS > Go to Settings > Expand Scripts > Open application > Find the code

$(".banner .slides").slick({
 arrows: true,
 dots: false,
 infinite: true,
 //speed: 200,
 fade: true,
 adaptiveHeight: true,
 prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left fa-3x"></i>',
 nextArrow: '<div class="slick-next"><i class="fa fa-angle-right fa-3x"></i>'
 });

Step 2

Change to:

$(".banner .slides").slick({
 arrows: true,
 dots: false,
 infinite: true,
 //speed: 200,
 fade: true,
 adaptiveHeight: true,
 autoplay: true,
 autoplaySpeed: 2000,
 prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left fa-3x"></i>',
 nextArrow: '<div class="slick-next"><i class="fa fa-angle-right fa-3x"></i>'
 });

Auto Play a Slideshow Component

Step 1

To auto scroll the Slideshow you should follow these steps:

Login to CMS > Go to Settings > Expand Scripts > Open application > Find the code

$(".slideshow").slick({
 arrows: true,
 dots: false,
 infinite: true,
 //speed: 200,
 fade: true,
 adaptiveHeight: true,
 prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left fa-2x"></i>',
 nextArrow: '<div class="slick-next"><i class="fa fa-angle-right fa-2x"></i>'
 });

Step 2

Change to:

$(".slideshow").slick({
 arrows: true,
 dots: false,
 infinite: true,
 //speed: 200,
 fade: true,
 adaptiveHeight: true,
 autoplay: true,
 autoplaySpeed: 2000,
 prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left fa-2x"></i>',
 nextArrow: '<div class="slick-next"><i class="fa fa-angle-right fa-2x"></i>'
 });