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.