javascript Slick Slider -如何在单击时删除特定幻灯片

c6ubokkw 于 2023-03-21 发布在 Java

关注(0)|答案(3)|浏览(147)

我正试图添加功能，以光滑的滑块，当你点击一张幻灯片，它会删除它从滑块。
我看了Slick Sliders网站上的文档，它展示了如何添加/删除幻灯片，但那只适用于滑块中的最后一张幻灯片。
我正试图使它的工作，这样你就可以删除一个特定的幻灯片的基础上，其中一个是点击。

<div class="slider add-remove slick-initialized slick-slider">
    <div aria-live="polite" class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 80px; transform: translate3d(0px, 0px, 0px);" role="listbox">
            <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 80px;" tabindex="-1" role="option" aria-describedby="slick-slide100">
                <h3>1</h3>
            </div>
        </div>
    </div>
</div>

<a href="javascript:void(0)" class="button js-remove-slide">Remove Slide</a>

$('.js-remove-slide').on('click', function() {
  $('.add-remove').slick('slickRemove',slideIndex - 1);
  if (slideIndex !== 0){
    slideIndex--;
  }
});

编辑：我添加了一些代码来展示它是如何为Slick slider HERE设置的，这是为了删除滑块中的最后一张幻灯片而设置的。
我正在尝试设置它，以便当在幻灯片上单击删除按钮时，该幻灯片将从滑块中删除。我从Slick Slider网站上抓取的片段只删除滑块中的最后一张幻灯片。所以我正在尝试找出如何在单击时删除特定幻灯片。

JavaScript

来源：https://stackoverflow.com/questions/50330328/slick-slider-how-to-remove-specific-slides-on-click

3条答案

按热度按时间

2izufjch1#

Here是CodePen与您的解决方案

console.clear();

$('.slider').slick({
  dots: true
});

$('.slide').on('click', function() {
  $('.slider').slick('slickRemove', $('.slick-slide').index(this) - 1);
});

html,
body {
  background: #102131;
  text-align: center;
}

.slider {
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  color: white;
}

.slider img {
  display: block;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<div class="slider">
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 1</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 2</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 3</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 4</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 5</h1>
  </div>
</div>

赞(0）回复(0）举报 2023-03-21

5jdjgkvh2#

$('.slick-slide').on('click', function() {
   var $indexid = $(this).attr("data-slick-index");
  $('.slick-slider').slick('slickRemove', $indexid);
});

赞(0）回复(0）举报 2023-03-21

relj7zay3#

其实很简单

$( document ).on( 'click', '.slick-slider .delete', {}, function() {
    $( this ).closest( '.slick-slide' ).remove();
} );

赞(0）回复(0）举报 2023-03-21

我来回答

javascript Slick Slider -如何在单击时删除特定幻灯片

3条答案

相关问题

热门标签

最新问答