Quick Tip: Auto play your Banners, Slideshows & Carousels

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>'
});

 

comments powered by Disqus

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results for their business.