Zach G Zach G - 2 months ago 23
Javascript Question

how to combine slick carousel features

I am trying to use the slick carousel from this website http://kenwheeler.github.io/slick/ and I am trying to use multiple features. There is some overlapping code that is probably causing problems. Autoplay and fade is not working with the other features. A simple deletion of some of the repetitive code should make this code function.

$(document).ready(function(){

$('.carousel').slick({

/* Multiple */
infinite: true,
slidesToShow: 3,
slidesToScroll: 3

/* Variable Width */
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true

/* Autoplay */
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,

/* Fade */
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'

});
});

Answer

I just did a JS fiddle using your code. The carousel works, but it needs some styling: http://jsfiddle.net/77vsunov/

 $(document).ready(function(){

    $('.carousel').slick({

        /* Multiple */
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,

        /* Variable Width */
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true,

        /* Autoplay */
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,

        /* Fade */
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear'

    });
});

I took your code, added the needed commas and it appears to be working properly.