Question

我在这个网站jquery slider as a Lightbox中使用这个jQuery Slider作为Lightbox设计检查了这个插件，我想在没有插件的情况下创建一个类似的插件。有谁知道我在哪里可以找到文档或教程？谢谢

Answer 1

最好的在线滑块之一是Slick

您可以通过选项“vertical：true”将其设置为Verticle滑块它可以使用你自己的css进行定制，并且为了在灯箱效果中实现滑块，你可以将它包装在一些html中，这些html在点击时显示，位置固定，背景为alpha。

$('.slick').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  vertical: true
});

$('.button').on('click', (e) => {
   $('.modal').addClass('open');
});

.container {
  background: red;
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  background: white;
  text-transform: uppercase;
  font-family: Helvetica;
  border: none;
  padding: 5px 10px;
}

.modal {
  display: none;
  position: fixed;
  background: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
}

.modal.open {
  display: block;
}

.slick {
  margin: 0 auto;  
  max-width: 500px;
}

.slick-list {
  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

<div class="container">
  <button class="button">Open</button>
  
  <div class="modal">
    <div class="slick">
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
      <img src="https://loremflickr.com/320/240" />
    </div>
  </div>
</div>

如何使jQuery Slider成为灯箱

1 个答案: