如何结合光滑的轮播功能
how to combine slick carousel features
我正在尝试使用此网站 http://kenwheeler.github.io/slick/ 的 slick carousel,并且我正在尝试使用多项功能。有一些重叠的代码可能会导致问题。自动播放和淡入淡出不适用于其他功能。简单删除一些重复的代码应该可以使这段代码起作用。
$(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'
});
});
我刚刚用你的代码做了一个 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'
});
});
我使用了你的代码,添加了所需的逗号,它似乎工作正常。
我正在尝试使用此网站 http://kenwheeler.github.io/slick/ 的 slick carousel,并且我正在尝试使用多项功能。有一些重叠的代码可能会导致问题。自动播放和淡入淡出不适用于其他功能。简单删除一些重复的代码应该可以使这段代码起作用。
$(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'
});
});
我刚刚用你的代码做了一个 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'
});
});
我使用了你的代码,添加了所需的逗号,它似乎工作正常。