Question

我尝试使用光滑的滑块来实现与他们网站上相同的效果，该网站的中央只有一张幻灯片，并且该幻灯片上显示的图像发生了变化

所以我尝试了，这就是我最终得到的结果

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<style>
.single-item{
    text-align: center;
}

.single-item img {
   height:200px;
}
</style>


<div class="single-item">
  <img src="https://hb.bizmrg.com/qq_expert_main/iphone-x.png">
  <img src="https://hb.bizmrg.com/qq_expert_main/macbook-pro.png">
  <img src="https://hb.bizmrg.com/qq_expert_main/macbook.png">
  <img src="https://hb.bizmrg.com/qq_expert_main/samsung-galaxy-s10-c.png">
</div>


<script>
$(document).ready(function(){
  $('.single-item').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      infinite: true,
      prevArrow: false,
      fade: true,
      nextArrow: false,
      variableWidth: true,
      adaptiveHeight: true,
      autoplay: true,
      autoplaySpeed: 2000

  });
});
</script>

https://codepen.io/ilya-lapan/pen/gVBmez

第一个图像出现在左侧，然后第二个图像出现在右侧，依此类推

我想要达到与光滑网站上相同的效果-https://tppr.me/mprG1

一张幻灯片和其中的图像发生变化

更新：我意识到variableWidth：true是发生这种情况的原因。我将所有图像设置为相同大小，并删除了设置，但是现在图像太高了，我想限制高度

通过滑动滑块实现居中效果

0 个答案: