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

时间：2020-03-06 07:06:49

标签： jquery html css slider slick.js

我有一个光滑的滑块，正在缩小活动幻灯片，并且应该只在幻灯片轨道中显示三张幻灯片。我面临的问题是它正在显示三张幻灯片，但另外两张是从两个极端都来的。我只需要在幻灯片轨道区域中展示三张幻灯片，而从侧面看什么都没有。请检查代码是否正确是否让我知道我应该进行哪些更改。我通过自定义CSS进行了一些更改，并尝试了很多事情，但是它正在发生巨大变化。最终结果应类似于给定链接{{3}中的客户推荐部分} 。请帮忙。这是我所做的http://165.22.181.70/clientell-1/

这是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" alt="">
      <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" alt="">
      <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" alt="">
      <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" alt="">
      <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" alt="">
      <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" alt="">
      <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>

1 个答案:

答案 0 :(得分：0)

<!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" alt="">
      <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" alt="">
      <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" alt="">
      <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" alt="">
      <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" alt="">
      <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" alt="">
      <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>

相关问题
最新问题