Removing slide on click

[damonkilcawley]

Hi,

I'm having a frustrating time trying to remove slides when clicked. I think the problem lies in me not getting the correct index required for the 'slickRemove' method.

both of these do not work:

function onClicked(){
    $('#myslider').slick('slickRemove', $(this).index($('#myslider').slick.$slides));
}

function onClicked(){
    $('#myslider').slick('slickRemove', $(this).attr('data-slick-index'));
}

the second one works at first, but as slides are removed 'data-slick-index' attr is not updated so the wrong slides start getting removed.

Hopefully there is an obvious solution that I am missing.

Thanks, Damon.

[leggomuhgreggo]

First things first: Please make a fiddle/pen when posting an issue. A lot of times you can solve it yourself by just mucking about in there and its the polite thing to do when asking for help.

So there's a couple problems with what you posted:

The first is that this must be being changed by your onClicked function; so it wont be the slide clicked.

The second is that even if it did work like you wanted it to, the data-slick-index wont work, because slickRemove's number corresponds to the array of slides that are actually there. The data-slick-index is essentially an ID and doesn't recalculate when a slide is removed. So lets say you show only one slide, and the one that shows on init is data-slick-index=0. You click it. I goes away. The slide that you see after is the next one data-slick-index=1 but when you click it data-slick-index=3 gets removed. Make sense?

I just selected all my slides and used jquery's index() method to find this. Here's the example

Hope that's helpful

[damonkilcawley]

Thanks for your help, I am closer to the solution but I am still having difficulties. I have created a fiddle here: https://jsfiddle.net/qfu04dvn/6/

If you click the first slide, slide number 5 is removed.

I think the problem maybe to do with having it on a infinite scroll. I can see there are 6 invisible "slick-cloned" slides before the first slide, which may be causing the wrong index.

[simeydotme]

https://jsfiddle.net/qfu04dvn/11/ :) -- although I kinda feel , as you do , that the data-indexes should update... 2.0.0 maybe :confounded:

[simeydotme]

Hmm, my solution doesn't work for clicking on cloned slides, unfortunately... I don't think it can be done like that. damn.

[leggomuhgreggo]

Yeah, dang, that's a tough nut.

I've grappled with trying to select original + cloned slides in another use-case and as far as I can tell, to get it to work, you basically have to recreate the logic behind cloned slide creation, and tag the slides.

@damonkilcawley I'm not exactly sure the specifics of what you're trying to accomplish, but you may still be able to tackle it with the filter method.

@simeydotme would it make sense to add "clone-ID" in setupInfinite--maybe a shared class or other attribute?

Something like this:

for (i = _.slideCount; i > (_.slideCount -
        infiniteCount); i -= 1) {
    slideIndex = i - 1;
    $(_.$slides[slideIndex]).clone(true).attr('id', '')
        .attr('data-slick-index', slideIndex - _.slideCount)
        .prependTo(_.$slideTrack).addClass('slick-cloned clone-template-'+slideIndex);
}
for (i = 0; i < infiniteCount; i += 1) {
    slideIndex = i;
    $(_.$slides[slideIndex]).clone(true).attr('id', '')
        .attr('data-slick-index', slideIndex + _.slideCount)
        .appendTo(_.$slideTrack).addClass('slick-cloned clone-template-'+slideIndex);
}

[subhak186]

Does the data-slide-index update requires adding below snippet to slickRemove API?

_.$slides.each(function(index, element) { $(element).attr('data-slick-index', index); });

[sujayjaju]

(+1) $sliderEl.slick("slickRemove",0) breaks the data-slick-index ordering.

[IanCaz]

Not sure if it's much help, but I worked around my problem by doing a refresh after removing a slide: $(".slickContainer").slick('slickRemove', curSlide, false).slick('refresh');

[63kans]

.slick('refresh') worked for me. Thanks IanCaz

[dennis-f]

@IanCaz this is the correct way to do it! 🎉 this should be in the documentation.. at least i did not find slick('refresh') 🤔

[korob93]

Hi, I'm working with some legacy code using slick 1.6.0. Funny thing, in my case it works ok for browser window width lesst than 1600-1700px and definitely breaks when window is wider than 1700px. .slick('refresh') works like a charm for both cases.

Hi there from 2020 :v:

[sehrun]

Confirm. Refreshing after removal does the trick. But it was diffucult to figure out. .slick('slickRemove', id).slick('refresh')

[shivamjtg]

slick('refresh') works fine. But the downside to that is it brings me back to the initial slide. To keep the slider position intact, I'm using sliderParent.slick('slickRemove', sliderParent.find('.js_insight_item').index(slide)); The extra sliderParent.find logic for handling multiple slick sliders on the same page.

[missixx]

Not sure if it's much help, but I worked around my problem by doing a refresh after removing a slide: $(".slickContainer").slick('slickRemove', curSlide, false).slick('refresh');

you are too kind, sir