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

Posted

技术标签:

【中文标题】我如何在光滑的滑块中只显示三张幻灯片？【英文标题】：How do i only show three slides in slick slider? 【发布时间】：2020-06-18 21:31:55 【问题描述】：

我有一个光滑的滑块，正在缩小活动幻灯片，它应该在幻灯片轨道中只显示三张幻灯片。我面临的问题是它正在显示三张幻灯片，但另外两张来自两端。我只需要在幻灯片轨道区域中显示三张幻灯片，而侧面什么都没有。请检查代码是否正确或者不让我知道我应该进行哪些更改。我通过自定义 css 进行了一些更改并尝试了很多东西，但它正在发生巨大变化。最终结果应该看起来像给定链接 http://165.22.181.70/clientell-1/ 中的客户推荐部分。请帮忙。这是我所做的https://jsfiddle.net/kaunishroy/563t7ejd/5/

这是 html 代码：-

<!DOCTYPE html>
<html>
<head>
  <title>clientell</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/slick.css">
  <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
  <link rel="stylesheet" type="text/css" href="css/custom.css">

</head>
<body>

<section class="client-test">
  <div class="regular slider">
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
  </div>
</section>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="js/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() 
      $(".regular").slick(
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        centerMode: true
      );
    );
</script>

</body>
</html>

这是 CSS 代码：-

* 
  box-sizing: border-box;


.slider 
    width: 50%;
    margin: 100px auto;


.slick-slide 
  margin: 0px 20px;


.slick-slide img 
  width: 100%;


.slick-prev:before,
.slick-next:before 
  color: transparent;



.slick-slide 
  transition: all ease-in-out .3s;
  opacity: .2;


.slick-active 
  opacity: .5;


.slick-current 
  opacity: 1;

.client-test
  padding: 4em 0;

.client-test .slick-prev,.client-test .slick-next
  top: 122%;

.client-test .slick-dots
  display: none !important;

.client-test .slick-next
  right: 45%;
  background:url('../images/next.png');
  background-repeat: no-repeat;
  width:50px; 

.client-test .slick-prev
    left: 45%;
    background:url('../images/prev.png');
    background-repeat: no-repeat;
    width:50px;

.client-test .slider-image
  width:20%;
  margin: 0 auto;

.client-test .inner-slider
  text-align: center;
  border: 1px solid;
  padding:20px;
  transition: all 0.5s ease-in-out 0s;
  z-index: 9;
  position: relative;
  border-radius:4px;
  background:#ffffff;
  transition: all 0.5s ease-in-out 0s;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.10);

.client-test .slider
  width:1000px;
  max-width: 100%;

.client-test .slick-slide
  width:300px !important;
  max-width: 100%;
  z-index: 0;
  margin: 0 !important;
  position: relative;

.client-test .slick-current
  transform:scale(1.1);
  z-index: 9;
  position: relative;
  transition: all 0.5s ease-in-out 0s; 

.client-test .slick-track
  padding: 40px 0;

这里是js代码：-

  <script type="text/javascript">
    $(document).on('ready', function() 
      $(".regular").slick(
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        centerMode: true
      );
    );
</script>

【问题讨论】：

你能把你的代码放在stack-overflow Snippet & JS Fiddle中吗？ 我有，请查看。 请看我的回答。请在整页视图中运行代码。如果您有任何疑问，请告诉我。 【参考方案1】： 

<!DOCTYPE html>
<html>
<head>
  <title>clientell</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
  

</head>
<body>

<section class="client-test">
  <div class="regular slider">
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
    <div class="inner-slider">
      <img src="images/man.png" class="slider-image" >
      <h2>Leila Taylor</h2>
      <p>Thanks yet again for another successful and very popular mobile app.</p>
    </div>
  </div>
</section>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() 
      $(".regular").slick(
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        centerMode: true
      );
    );
</script>




<style>

* 
  box-sizing: border-box;


.slider 
    width: 50%;
    margin: 100px auto;


.slick-slide 
  margin: 0px 20px;


.slick-slide img 
  width: 100%;


.slick-prev:before,
.slick-next:before 
  color: transparent;



.slick-slide 
  transition: all ease-in-out .3s;
  opacity: .2;


.slick-active 
  opacity: .5;


.slick-current 
  opacity: 1;

.client-test
  padding: 4em 0;

.client-test .slick-prev,.client-test .slick-next
  top: 122%;

.client-test .slick-dots
  display: none !important;

.client-test .slick-next
  right: 45%;
  background:url('../images/next.png');
  background-repeat: no-repeat;
  width:50px; 

.client-test .slick-prev
    left: 45%;
    background:url('../images/prev.png');
    background-repeat: no-repeat;
    width:50px;

.client-test .slider-image
  width:20%;
  margin: 0 auto;

.client-test .inner-slider
  text-align: center;
  border: 1px solid;
  padding:20px;
  transition: all 0.5s ease-in-out 0s;
  z-index: 9;
  position: relative;
  border-radius:4px;
  background:#ffffff;
  transition: all 0.5s ease-in-out 0s;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.10);

.client-test .slider
  width:1000px;
  max-width: 100%;

.client-test .slick-slide
  width:300px !important;
  max-width: 100%;
  z-index: 0;
  margin: 0 !important;
  position: relative;

.client-test .slick-current
  transform:scale(1.1);
  z-index: 9;
  position: relative;
  transition: all 0.5s ease-in-out 0s; 

.client-test .slick-track
  padding: 40px 0;


</style>

</body>
</html>

【讨论】：

以上是关于我如何在光滑的滑块中只显示三张幻灯片？的主要内容，如果未能解决你的问题，请参考以下文章

javascript 光滑的滑块 - 标签 - 使幻灯片显示动态

光滑的滑块箭头在响应模式下表现得像幻灯片

当幻灯片更改时，光滑的滑块会暂停 youtube 视频

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

光滑的滑块 - 当滑块进入下一帧时暂停 YouTube 剪辑

在光滑的滑块内居中项目