Slick Slider - Как удалить определенные слайды при клике - PullRequest
Новая
       28

Slick Slider - Как удалить определенные слайды при клике

0 голосов
/ 14 мая 2018

Я пытаюсь добавить функциональность в скользящий слайдер, где при нажатии на слайд он удаляется из слайдера.

Я посмотрел документацию на сайте 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, удаляет только последний слайд в слайдере.Поэтому я пытаюсь выяснить, как удалить определенный слайд при нажатии.

image

1 Ответ

0 голосов
/ 14 мая 2018

Здесь - это 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>
...