kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.33k stars 5.88k forks source link

The "slickRemove" method is unable to remove the "slick-cloned" slide/item #4203

Open anisurrahman99 opened 1 year ago

anisurrahman99 commented 1 year ago

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

The "slickRemove" method is unable to remove the ("slick-cloned" + its original) slide based on the "click" event on the "slick-cloned" slide.

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

[ paste your jsfiddle link here ]

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

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

Steps to reproduce the problem

  1. Go to this link: http://jsfiddle.net/anisur5/ehpacfvj/46/
  2. Click on the second dot (•). Then If you click on 'slide10', Slick js is unable to delete the clicked item. Becuase this 'slide10' is a cloned item.

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

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

What is the expected behaviour?

I want slick to remove the clicked (cloned) item + its original item. ...

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

What is observed behaviour?

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

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

More Details

Here is the code that slick.js uses to remove slides. I added a comment tag for return false; so that Slick can remove item that comes with a negative value in the "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();

    };