简体   繁体   English

如何结合圆滑的轮播功能

[英]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. 我正在尝试使用此网站http://kenwheeler.github.io/slick/上的光滑轮播,并且正在尝试使用多个功能。 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'

        });
    });

I just did a JS fiddle using your code. 我只是用您的代码做了一个JS小提琴。 The carousel works, but it needs some styling: http://jsfiddle.net/77vsunov/ 轮播可以工作,但需要一些样式: 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. 我获取了您的代码,添加了所需的逗号,它似乎正常运行。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM