如何结合光滑的轮播功能答案

【问题标题】：how to combine slick carousel features如何结合光滑的轮播功能
【发布时间】：2015-08-10 09:11:20
【问题描述】：

我正在尝试使用来自该网站http://kenwheeler.github.io/slick/ 的光滑轮播，并且我正在尝试使用多种功能。有一些重叠的代码可能会导致问题。自动播放和淡入淡出不适用于其他功能。一些重复代码的简单删除应该使这个代码功能。

     $(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'

        });
    });

【问题讨论】：

你是否为同一个轮播调用了 4 次？
是的，功能最终会合并为一个功能
但是你有 4 个轮播吗？或者你有一个并且你想为它调用光滑的旋转木马 4 次（如果是这样的话 - 为什么？）？
我有 1 个轮播，我想调用 1 次

标签： javascript carousel slick.js

【解决方案1】：

我刚刚用你的代码做了一个 JS fiddle。轮播可以工作，但需要一些样式：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'

    });
});

我获取了您的代码，添加了所需的逗号，它似乎工作正常。

【讨论】：