如何使滑块在中心有一个大图像并且只有三张具有自动幻灯片功能的幻灯片

Question

我怎样才能用

制作这个滑块

上面有 3 张不同的图片
上面有 3 个不同的文字
按钮将像 Bootstrap 一样打开模态对话框，每个幻灯片的按钮将在模态上显示不同的文本。
幻灯片必须自动滑动

请看这张截图 Slider Image

$(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: true,
    speed: 300,
    dots: true,
    arrows: true
  });

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      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: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css" rel="stylesheet"/>



<div class="slider-inner">
    <section class="center slider">
       <div>
           <img src="http://placehold.it/350x300?text=1">
       </div>
       <div>
          <img src="http://placehold.it/350x300?text=2">
       </div>
        <div>
           <img src="http://placehold.it/350x300?text=3">
       </div>
   </section>
</div>

注意：我在我的项目中使用 Bootstrap 4.5。

请帮忙，因为我是这个领域的新手并且得到了这个学校项目。

Answer 1

你做到了！

现在您只需更改设置中的 slidesToShow 属性。虽然您在图像中看到 3 张幻灯片，但实际上只有 1 张活动幻灯片。

那是因为 centerMode 是 true 并且整个滑块将偏移到中心，显示上一张和下一张幻灯片的提示。

检查下面的例子。

$(".center").slick({
  dots: true,
  infinite: true,
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  speed: 300,
  dots: true,
  arrow: true
});

html,
body {
  margin: 0;
  padding: 0;
}

* {
  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: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  transform: translate3d(20%, 0, 0) scale(0.8);
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  transform: scale(1);
  opacity: 1;
}

.slick-current ~ .slick-slide {
  transform: translate3d(-20%, 0, 0) scale(0.8);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css" rel="stylesheet" />

<div class="slider-inner">
  <section class="center slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
  </section>
</div>

如何使滑块在中心有一个大图像并且只有三张具有自动幻灯片功能的幻灯片

How to make Slider with one Big image in center and has only three slides with auto slide feature

html

javascript

css

bootstrap-modal

bootstrap-4