Slick Slider - How to Remove Specific Slides On Click

Question

I am trying to add functionality to slick slider where when you click on a slide it will remove it from the slider.

I looked at the documentation on Slick Sliders website and it shows how to add/remove slides, but that only works for the last slide in the slider.

I am trying to make it work so you can remove a specific slide based on which one is clicked.

<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--;
  }
});

EDIT: I added some more code to show how it is set up for Slick slider HERE this is set up to remove the last slide in the slider.

I'm trying to set it up so when the remove button is clicked on a slide that slide will be removed from the slider. The snippet I grabbed from the Slick Slider website only removes the last slide in the slider. So I'm trying to figure out how to remove a specific slide on click.

Denmark

can you please post complete html code or screenshot? – Endor

@TAHASULTANTEMURI I added the html code found on slick sliders website on how they set it up to remove the last slide. I also added a screenshot of my project to display what I am trying to do. – Denmark

means you want to remove "Fade" area? – Endor

@TAHASULTANTEMURI Not sure what you mean by "Fade" area? If you look at the screenshot each of those slides in the slider have a remove button on it. What I am trying to do is when clicked that slide should be removed from the slider. What the example on Slick Slider's website is doing is using a button outside the slider and is only removing the last slide in that slider, not a specific one like how I need it to. Trying to figure out how to modify the slick slider snippet to work with the functionality I need for this project. Sorry if not clear, if you have any other question let me know! – Denmark

you problem is scattered can you please minimize extra code? – Endor

you will have to set id for each slide then on the basis of id slide can be removed. – Endor

Answer 1

Here is a CodePen with your solution

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>

Referee

This is exactly what I was looking for. Thank you for your help! And love the image you chose to use haha – Denmark

Another way to get the current index is: $('.slick-slide').index($('.slick-current')) – Effieeffigy

Answer 2

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

Thirion

Please, add a proper explanation. It would greatly improve its long-term value of the answer. – Sodden

Answer 3

Pretty simple actually

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

Berberidaceous