Slick Carousel - The "slickRemove" method is unable to remove the "slick-cloned" slide/item based on the "click" event or "data-slick-index" attribute

Question

short description of the bug / issue, provide more detail below.

I am building a drag-and-drop quiz app. If a user drags a cloned item ( slick generates cloned items in infinite loop option by default) and drops it at the correct dropzone, I want to remove the dropped item from the carousel based on "data-slick-index" attribute value of the dropped item.

But the "slickRemove" method of Slick Carousel is unable to remove the "slick-cloned" slide + its original slide based on the "click" event on the cloned item or "data-slick-index" attribute value of the cloned item.

====================================================================

[ paste your jsfiddle link here ]

http://jsfiddle.net/anisur5/ehpacfvj/30/

====================================================================

Steps to reproduce the problem

1. Go to this link: http://jsfiddle.net/anisur5/ehpacfvj/30/
2. Click on the second dot (•) and Inspect "slide10" which contains data-slick-index="-1". If you click on it (slide10), Slick js is unable to delete the clicked item.

It happens whenever I click on the "slick-cloned" slides.

====================================================================

What is the expected behaviour?

I want slick to remove the clicked item even though it is a "slick-cloned" item.

====================================================================

What is observed behaviour?

Slick's "slickRemove" method can not delete the clicked item if the item is "slick-cloned".

====================================================================

More Details

• Which browsers/versions does it happen on? => All
• Which jQuery/Slick version are you using? => Latest
• Did this work before? => No

Here is the code that slick.js uses to remove slides. I added a comment tag for return false; so that Slick can remove items that come with negetive value in "data-slick-index" attribute( I also tried to remove items based on "data-slick-index" ).

   Slick.prototype.removeSlide = Slick.prototype.slickRemove = function(index, removeBefore, removeAll) {
    
            var _ = this;
    
            if (typeof(index) === 'boolean') {
                removeBefore = index;
                index = removeBefore === true ? 0 : _.slideCount - 1;
            } else {
                index = removeBefore === true ? --index : index;
            }
    
            if (_.slideCount < 1 || index < 0 || index > _.slideCount - 1) {
               // return false;
            }
    
            _.unload();
    
            if (removeAll === true) {
                _.$slideTrack.children().remove();
            } else {
                _.$slideTrack.children(this.options.slide).eq(index).remove();
            }
    
            _.$slides = _.$slideTrack.children(this.options.slide);
    
            _.$slideTrack.children(this.options.slide).detach();
    
            _.$slideTrack.append(_.$slides);
    
            _.$slidesCache = _.$slides;
    
            _.reinit();
    
        };

Answer 1

If you add the count of original slides to the negative data-slick-index of the clones, it should give you the index of the original. Only slick does not appear to update that value correctly - so by using that alone, I ended up removing slides with a higher index than the clicked one, when clicking on an original.

Only workaround I could find on the quick, is to store the reference to the slide, on the slide, before the slider gets initialized - then the clones will still refer to the original. Via that reference, you can then find the index of the original in the list of original slides (exclude the clones), and then use that value to remove the slide.

// before slider initialization:
$('.slider div').each(function(i,e) {
    $(e).data('self', e);
});

// slider init here
// ...

//Remove slick item based on click.
$(".slider").on("click", ".slick-slide", function() {
  var originalSlide = $(this).data('self')
  index = $('.slider .slick-slide:not(.slick-cloned)').index(originalSlide);
  
  $(".slider").slick('slickRemove', index);
});

http://jsfiddle.net/1hx5s39z/2/

Answer 2

Code you provide a more detailed look into your code? I think I can help. It would also be helpful to know why you want to remove the cloned elements?