如何使光滑的滑块连续自动播放,但在箭头/点单击时加速滚动?
P粉956441054
P粉956441054 2024-03-25 21:20:33
0
1
388

我想制作一个连续自动播放的滑块。它工作正常,但箭头和点看起来无法正常工作。我不确定应该更改哪些设置,但我希望滑块在单击箭头或点后立即滚动。

我尝试使用下面的代码更改一些设置,但似乎没有任何效果。

speed 设置为 6000 自动播放具有完美的计时,但在单击点/箭头后滚动时使用相同的慢速,这种行为是不需要的(它应该立即滚动到所选幻灯片)。您能帮助我了解我应该做什么来实现我的目标吗?

$(document).ready(function(){
  $('.test').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1,
    speed: 6000,
    dots: true,
    cssEase: 'linear',
    waitForAnimate: false,
    pauseOnFocus: false, 
    pauseOnHover: false
  });
});
.slick-prev:before,
.slick-next:before 
{
    color: black!important;
}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div style='margin-left:20px;width:200px;color:black!important;'>
    <div class='test'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>

P粉956441054
P粉956441054

全部回复(1)
P粉217784586

某些 JS 选项可能无法与其他设置一起使用(就像在 SwiperJS 中一样),因此当您浏览每个添加的 JS 函数时,请注意它是否可能否定另一个早期的设置。 以下内容应该能让您走上正轨(作为示例)。

sssccc
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!