Quick Tip: Auto play your Banners, Slideshows & Carousels
Important: We have now included a switch within the content editor area that allows users to turn on/off autoplay on all carousels, banners and slideshows as and when they are used on any page type.
I have a Banner on an Advanced Page, and some Slideshows on a Standard Page. How do I set them to auto play?
uSkinned Member
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>'
});
Code changes/additions have been highlighted in bold.
You can adjust the speed of the auto change speed by changing the number 2000. One second is roughly equal to 1000.