如何修复Slick.js中的第一张幻灯片并从第二张幻灯片开始？

时间：2020-09-06 02:33:44

标签： css bootstrap-4 slick.js

我在项目上使用Bootstrap 4和slick slider。我需要在卡片样式中显示3列。因此，我设计了卡，然后尝试在其上使用光滑滑块。它的工作非常好。当我尝试保持第一张卡固定，然后使用下一张第二张卡滑动时。但是它不在同一行。我希望所有卡都在同一行。

这就是我想要的： what i want

但这是我尝试时得到的： What i got

这是我使用的不起作用的代码：

jQuery(document).ready(function ($) {
$('.sp-carousel').slick({
      
    dots: false,
    arrows: true,
    infinite: true,
    speed: 300,
    autoplay: true,
    autoplaySpeed: 2000,
    slidesToShow: 3,
    slidesToScroll: 1,
    prevArrow: '<button class="slide-arrow prev-arrow"></button>',
    nextArrow: '<button class="slide-arrow next-arrow"></button>'    
});
        });
/* Specialist card details start  */
.sp-wrapper{ width:100%;padding:1%;}
.sp-carousel{ width:90%;height:90%; margin:0px auto;}

.cardmain{  margin:10px;}
.cardmain hr {width:100%;background-color:#ADADAD;opcaity:0.1;margin:2px;}
.slick-slide img{ width:369px;height:385px;}
.slick-prev, .slick-next{background: #000;border-radius: 15px;border-color: transparent;}

.card{border: 2px solid #fff;box-shadow: 1px 1px 15px #ccc;}
.card-header {padding:0;}
.card-header img {width:100%;}
.card-body{background:#fff;width:100%;vertical-align:top;padding:10px;}
.card-content-sp{background:#fff;}
.card-content-sp h5 {color:#000000;font-weight:400;font-size:18px;line-height:1.3em;margin-top:-1px;margin-bottom:5px;padding:0;}
.card-title{color:#000000;font-weight:500;font-size:18px;line-height:1.3em;margin-top:0;margin-bottom:0px;padding:0px;}
.card-text{color:#747373;font-size:14px;font-weight:400;font-size:1em;line-height:1.5;margin:0px;margin-bottom:10px;padding:0;font-family:Roboto-Thin;height:145px;overflow:auto;}
/* Specialist card details End */
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

<!-- jQuery first then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  

  <div class="sp-wrapper">
  

      <div class="cardmain">
        <div class="card">
          <div class="card-header">
            <img src="http://via.placeholder.com/369x385?text=dr-samim">
          </div><a href="dr.html">
          <div class="card-body">
            <div class="card-content-sp">
              <div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
              <div class="card-text">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
              </div>
            </div>
          </div></a>
        </div>
      </div>   

  <div class="sp-carousel">

      <div class="cardmain">
        <div class="card">
          <div class="card-header">
            <img src="http://via.placeholder.com/369x385?text=dr-2">
          </div><a href="dr.html">
          <div class="card-body">
            <div class="card-content-sp">
              <div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
              <div class="card-text">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
              </div>
            </div>
          </div></a>
        </div>
      </div>
      <div class="cardmain">
        <div class="card">
          <div class="card-header">
            <img src="http://via.placeholder.com/369x385?text=dr-3">
          </div><a href="dr.html">
          <div class="card-body">
            <div class="card-content-sp">
              <div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
              <div class="card-text">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
              </div>
            </div>
          </div></a>
        </div>  
      </div>
      <div class="cardmain">
        <div class="card">
          <div class="card-header">
            <img src="http://via.placeholder.com/369x385?text=dr-4">
          </div><a href="dr.html">
          <div class="card-body">
            <div class="card-content-sp">
              <div class="card-title">This is the Fourth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
              <div class="card-text">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
              </div>
            </div>
          </div></a>
        </div> 
      </div>
      <div class="cardmain">
        <div class="card">
          <div class="card-header">
            <img src="http://via.placeholder.com/369x385?text=dr-5">
          </div><a href="dr.html">
          <div class="card-body">
            <div class="card-content-sp">
              <div class="card-title">This is the Fifth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
              <div class="card-text">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
              </div>
            </div>
          </div></a>
        </div>
      </div>
      <div class="cardmain">
        <div class="card">
          <div class="card-header">
            <img src="http://via.placeholder.com/369x385?text=dr-6">
          </div><a href="dr.html">
          <div class="card-body">
            <div class="card-content-sp">
              <div class="card-title">This is the Sixth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
              <div class="card-text">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
              </div>
            </div>
          </div></a>
        </div>
      </div> 


    </div>
  </div>

这是运行良好的代码，但我不希望这样： https://jsfiddle.net/mczkqv75/2/

如何固定第一张滑块或第一张卡片，然后从第二张卡片制作滑块？

1 个答案:

答案 0 :(得分：2)

尝试一下：

.sp-wrapper {
  display: flex;
}

.sp-carousel {
  flex: 0 0 66.67%;
  min-width: 66.67%;
  max-width: 66.67%;
}

然后将JS中的slidesToShow更改为2：

slidesToShow: 2,
相关问题
最新问题