如何获得光滑的滑块以在循环中平滑过渡

Posted

技术标签:

【中文标题】如何获得光滑的滑块以在循环中平滑过渡【英文标题】:How to get slick slider to smooth transition in a loop 【发布时间】:2019-06-21 07:33:24 【问题描述】:

所以我使用与 Andrei here 所做的几乎相同的代码构建了一个滑块。

这一切都很好......但是当您滚动回第一张幻灯片时,您注意到过渡了吗?

有谁知道我该如何解决这个问题?我一直在尝试不同的东西,但似乎没有任何效果。

我希望它在加载下一张图片时在滑块循环中平滑过渡,没有跳跃。

任何帮助将不胜感激。谢谢。

$('.slider').slick(
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3
);
.slick-slide>div 
  transform: scale(.5);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);


.slick-center>div 
  transform: scale(1);


.slider__item>img 
  width: 100%;
  height: auto;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
</div>

【问题讨论】:

在这里您可以找到一张关于该错误的有趣票:github.com/kenwheeler/slick/pull/3307 也许它对您也有帮助。 太棒了,这解决了我的问题!不知道为什么我从来没想过要查票哈哈。非常感谢:) 耶!不客气! :-) 【参考方案1】:

请添加光滑的滑块选项:

speed:1300,
infinite: true,

$('.slider').slick(
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3,
  speed:1300,
  infinite: true,
);
.slick-slide>div 
  transform: scale(.5);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);


.slick-center>div 
  transform: scale(1);


.slider__item>img 
  width: 100%;
  height: auto;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" >
  </div>
</div>

【讨论】:

非常感谢您,但是您是否看到在第 6 次单击“下一步”按钮时,它似乎仍然比其他幻灯片跳得更大,而不是平滑过渡更大?我似乎无法弄清楚是什么原因造成的:(【参考方案2】:

所以我只是更改了我的 css,以便通过 .slick-slide 直接定位 .slick-center ,这似乎可以解决问题!

不知道为什么这之前不起作用,因为我以几乎相同的方式设置它,但出于某种原因,必须通过 .slick-slide 而不是独立地定位 .slick-center 才能被拾取并且工作顺利。

感谢thisReSedano的链接!

:)

【讨论】:

" 但由于某种原因 .slick-center 必须通过 .slick-slide 定位,而不是独立定位,才能将其拾取并顺利工作。"也许是因为 css 选择的特殊性?

以上是关于如何获得光滑的滑块以在循环中平滑过渡的主要内容,如果未能解决你的问题,请参考以下文章

如何在光滑的滑块中创建自定义箭头以在悬停时更改图像?

如何使用 css 变换创建循环过渡动画

如何在 html 导航栏点击之间获得平滑过渡

我如何在光滑的滑块中只显示三张幻灯片?

如何使 React 光滑的滑块与图标一起使用?

如何等待 v-for 然后执行光滑的滑块