search

dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.
MIT License
250 stars 29 forks source link

Two clicks to jump from the last slide to the first when "Mouse draggable" is active #40

Closed pneumotube closed 2 years ago

pneumotube commented 2 years ago

Hi,

when "Mouse draggable" is set, the last slide switches to the first slide after repeated mouse click only. The first click on the right arrow makes the slide twitch a bit, and it switches only after the second click.

Tested on the latest FF, Chrome, and Chrome Canary.

You can check it on the first example from the Configurator with these settings.

Unfortunately, it isn't reproduced all the time on the configurator page, but I have this issue 100% of the time on my test page. I can email it to you if that's ok.

nicped commented 2 years ago

This is due to a bug with double slider initialization on the configuration page and a problem with the dragging also running when using the navigation arrows. I fixed that: https://github.com/dynamicweb/swiffy-slider/commit/c2753596f5b7a293b182719ef369bf706050499e

I believe that fixes the issue. Let me know if you see the same.

pneumotube commented 2 years ago

Thanks! Applied changes to swiffy-slider-extensions.min.js from https://github.com/dynamicweb/swiffy-slider/commit/c2753596f5b7a293b182719ef369bf706050499e.

Now both sliders reach the last slide and stop (the ''slider-nav-noloop" is not set). But they switch from the first slide to the last by clicking the left arrow.

I just do something wrong for sure :)

Can you please take a sneak peek at my setup below?

swiffy-slider styles are inlined in <head> plus there's additional css to adjust to page design: .swiffy-slider{max-width:80%}.slider-container{text-align:center}@media screen and (max-width:1200px){.swiffy-slider{max-width:100%}}

I have two sliders with different sets of pictures but with the same markup:

<div class="swiffy-slider .... slider-nav-mousedrag">
    <div class="slider-container">
        <div>
            <img src="" width="" height="" decoding="async">
        </div>
        ...
        <div>
            <img src="" width="" height="" decoding="async" loading="lazy">
        </div>
    </div>

    <div type="button" class="slider-nav"></div>
    <div type="button" class="slider-nav slider-nav-next"></div>

    <div class="slider-indicators">
        <div class="active"></div>
        ...
        <div></div>
    </div>
</div>

And <script src="/js/swiffyslider.js" defer></script> below where swiffy-slider.min.js and swiffy-slider-extensions.min.js are combined.

nicped commented 2 years ago

Cannot tell without seeing the entire page - looks right. If you can repo on the config page, I can have a look - otherwise you have to debug yourself :-).

pneumotube commented 2 years ago

Could it be related to slider's double initiation? I'm not a developer, so I apologize for being annoying. 🙂

The console says:

изображение

nicped commented 2 years ago

Yes, that would be an issue. The js init it self, so maybe you also do it manually causing double load?

pneumotube commented 2 years ago

It works in FF though (jumps from the last to the first slide).

I don't init manually, maybe that's because I use swiffyslider.js and swiffysliderextensions.js both? I see initSlider(e) in the code of these two.

pneumotube commented 2 years ago

It's not related to the two scripts and not related to the two sliders on page. Keep testing.

pneumotube commented 2 years ago

Managed to reproduce this issue. In Chromium based browsers on my test page there is no loop if there are 4 or 5 pictures in the slider. And loop works with 3 pictures slider.

Could you please take a look https://pneumotube.github.io/slider/

perdittmann commented 2 years ago

Quick test under macos: Chrome, Safari and Firefox (all probably latest-ish versions) give a thumbs up and loop and loop. In FF, I had an issue at first that the loops needed an extra invitation (one additional click on the right arrow at the last picture), but I couldn't reproduce. To me, it seems fine.

pneumotube commented 2 years ago

I'm on Windows, loop in two top sliders doesn't work in Chrome, Chrome Canary and Edge. Gonna check on other PCs though, if it's OK on Mac.

nicped commented 2 years ago

Im on my phone only today but it seems good. Could be browser zoom - never tested that. Could be that the content inside your slides are too wide for the slide container - could cause some math to not add up. You could check in the inspector

pneumotube commented 2 years ago

Thanks, yeah, it's something with my wrapper styles perhaps. Getting inconsistent results in different browsers. One of the sliders is stuck on oldish Chrome. I will dig into it.