Looping not working

[dhawal24]

Hi,

Looping from right arrow is not working.

[nicped]

Yes it is,

[dhawal24]

I have used multiple slider in one page & some slider are under tabs, also I haven't used the class no-loop on any of the slider.

But the loop are not working on any slider. Also when I have ratio class the loop starts working but shows scrollbar on right side.

[nicped]

What if you test on https://swiffyslider.com/ - do the loop work? It does for me.

My guess is that you have some kind of implementation detail that is causing the issue. If you need help to figure out what it is, you can provide a link to the page where the error occurs, or provide a codepen with the issue so I can take look.

[tobiasbaehr]

In our case the option "No snap" or class slider-item-nosnap works. default is center.

[nicped]

I do not think the nosnap has anything to do with being able to loop from the right arrow. Like this one works fine for me: https://swiffyslider.com/configuration/?slider-item-show=slider-item-show2&slider-item-reveal=slider-item-reveal

[tobiasbaehr]

@nicped yes more a edge case and workaround. :D Try the slider with slider-item-show2 https://www.openculturas.org/de/referenzen. No problems with slider-item-show3 .

[nicped]

Maybe there is something I do not understand :-). If I try the slider on that page (nice by the way!) using slider-item-show2 or slider-item-show3or just as you have set it up, it works as expected for me... Or could it be a Safari on Apple device that is the issue?

[tobiasbaehr]

Firefox/manjaro. ;-)

The next button/indicators works then not anymore.

We know it has something to do with css/html, because we just change the theme, where it works, but we do not know whats problem with the css. but atm we can live with no-snap. :D

fyi: https://www.drupal.org/project/swiffy_slider

[nicped]

Nice - saw that project. Looks cool and thank you for taking Swiffy Slider into the world!

Looked at the issue - it has to do with this funny thing: https://github.com/dynamicweb/swiffy-slider/blob/main/src/swiffy-slider.css#L487

In the default CSS width and height of the :before selector is set to 1px to handle how Firefox handles snapping of a pseudo element. If you change that to 5px in the case of your website, the navigation works without nosnap used.

.slider-container>*::before {
        /*FF fix setting w+h to 1 px - otherwise snap will not occur*/
        width: 5px;
        height: 5px;
 }

A bit odd - and I cannot see why it is different in this site compared to the Swiffy Examples site... Maybe difference in reset of ul>li in the two sites?

[nicped]

Looking further into this, I think Firefox have fixed the issue - so my fix is now causing the issue.

A quick local test shows me that if I completely remove these lines: https://github.com/dynamicweb/swiffy-slider/blob/main/src/swiffy-slider.css#L479-L491

All works like a charm...

[hexabinaer]

Thank you nicped for taking the time to inspect the issue, really appreciate it.

Our team loves Swiffy Slider and I'm positive it can overhaul most of the "established" slider solutions that have been provided for Drupal so far.

[hexabinaer]

A quick local test shows me that if I completely remove these lines: https://github.com/dynamicweb/swiffy-slider/blob/main/src/swiffy-slider.css#L479-L491

Makes sense. Removing those lines fixes the issue in our setup, thanks so much!

I'll leave this example for the curious. It's using this configuration

[dhawal24]

The issue is resolve & working for me