作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我需要让光滑的旋转木马自动移动,无限且不停地移动。这是我已经拥有的:
$('#carousel').slick({
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 1000,
speed: 1000,
infinite: true,
focusOnSelect: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1
}
}]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div id="carousel">
<div><a href="#"><img src="http://placehold.it/205x105" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div>
</div>
但是正如您所见,当它移动到另一张幻灯片时,它会停顿一会儿,然后移动到下一张。我想让它不停地慢慢运行。我想你明白我的意思。
最佳答案
您需要设置 autospeed: 0
并添加 cssEase:linear
这将提供您正在寻找的自动收报机效果。
$('#carousel').slick({
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 0,
speed: 2000,
cssEase:'linear',
infinite: true,
focusOnSelect: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1
}
}]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div id="carousel">
<div><a href="#"><img src="http://placehold.it/205x105" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div>
<div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div>
</div>
关于javascript - 光滑的旋转木马 - 无限不停的表演,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36127468/
我尝试通过电子邮件发送使用 Delphi 构建的 DLL 文件,但收到了拒绝电子邮件报告: “您的电子邮件被拒绝,因为它包含 Trojan.Delf-9364” 所以我将文件上传到 http://sc
Nod32 刚刚警告我有关嵌入到网站图标中的木马。 我在这里复制了 favicon.ico 的内容: http://pastebin.com/BkD4tKNy 不幸的是,我对 Javascript 没
我正在 Code::Blocks 20.03 和 MinGW(GCC Build-20200227-1 9.2.0,单独安装)中测试一个简单的“hello world”程序,但运行它时在控制台上没有消
我是一名优秀的程序员,十分优秀!