光滑滑块 - 如何在单击时删除特定幻灯片

Question

我正在尝试为滑动滑块添加功能，当您单击幻灯片时，它会将其从滑块中移除。

我查看了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网站抓取的片段只删除了滑块中的最后一张幻灯片。所以我想弄清楚如何在点击时删除特定的幻灯片。

Answer 1

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>

Answer 2

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

Answer 3

实际上很简单

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