Hide next button swiffy-slider-nav before init

[dngraphisme]

Hello @nicped ,

Thank you for this library and the work you provide. I have a small question concerning a particular event in ajax. I explain

I use this in class: slider-nav-autohide on swiffy-slider.

The use of the carousel type works well, but I have an event in ajax, which allows to change a variation of a product, and therefore on click, I relaunch swiffy-slider at the success of the ajax.

Except that I have the next navigation which appears 1s then disappears again (due to the reinitialization of the library)

Is there something I can have to counter this behavior ?

https://github.com/user-attachments/assets/54874a40-64a2-4e7d-85f1-b813d9c1dabf

Thank you, regards Nicolas

[nicped]

When you use .slider-nav-autohide and slider-nav-animation there is an IntersectionObserver that will set slide-visible on every slide that is 30% inside the sliding area. In you case since you have one slide on each page, you have that on one. Further the observer will set either .slider-item-first-visible or .slider-item-last-visible.

These 2 classes will either hide or show the arrows using visibility. On .slider-nav thee is a [.slider-nav](transition: visibility 0.1s, opacity 0.2s linear;) which I believe gets triggered in your case when you re-instantiate the slide - first the arrow is visible, then the observer does what it needs to and adds the classes and then the transition kicks in.

My best guess.

So you can probably get rid of it by adding this CSS - or something similar.

.slider-nav {
    transition: none;
}

[dngraphisme]

Hello @nicped, thanks again for your reply and sorry for the delay in my response.

Problem 1 :

Unfortunately it doesn't work even without transition on the buttons. I've always had this problem since I used swiffer, especially after an ajax, when you call up the library. I honestly don't see how to solve this problem.

I made a video again to show you.

https://github.com/user-attachments/assets/a0afcfe6-2dab-44b8-a425-7826d37d3686

---

Problem 2 :

I have a Swiffyslider carousel, with product miniatures which also have carousel variations with Swiffyslider.

If you click on an arrow on a thumbnail, it moves the thumbnail carousel overall. Is there nothing we can do in JS to target a carousel with its own navigation?

Thanks again, Nicolas

[nicped]

I cannot figure this out from a video... I need the browser developer tools to figure it out. You should be able to find that out. An idea is to not replace the instance of the slider directly when you update the content - but render it first out of viewport and then swap them - e.g. by stacking them and let the new instance have display:none;, remove the old instance and set display block/inline on the new instance.

Or you can provide a link or codepen with the issue and I can give it 5 minutes to see if I can see what it is.

[dngraphisme]

@nicped thanks for your feedback.

For problem #1 of the arrows; at each ajax call I restart swiffy via this function: window.swiffyslider.init();

I'll see about doing it differently for this. I won't bother you about it anymore.

For problem #2, it's very simple, if there is an instance of a swiffyslider carousel and inside the li element there is another swiffyslider carousel (what is on the videos), if we click on the arrows of the 2nd instance, it makes the carousel of the 1st instance rotate.

I'll try to make you a codepen asap to show you.

Thanks

[nicped]

Ok - did not get the part with slider inside slider. I do not think that has been tested - so probably not well supported.