Swiper: watchOverflow and loop

[ockle]

When you have one image/element/slide, watchOverflow: true hides the navigation and pagination as expected. However, if you also have loop: true (because you want it to loop in instances where there is more than one slide), watchOverflow no longer has any effect. I guess the watchOverflow calculation isn't done before the additional/duplicate slides are inserted for the loop effect.

[Togetic]

same problem

[franckichmish]

same for me

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

[durchanek]

This issue still persists in the latest version

[stevenleija]

Same for me

[kireerik]

I am not using watchOverflow with loop, but I think this issue makes sense. So we should open this issue.

@nolimits4web What do you think?

[vstetsenko1904]

Same for me.
Loop always duplicates slides even number of slides less than slidesPerView.
This is very big problem for me.
@nolimits4web any update ?

[saboshi69]

Same for me

[WitoTV]

@nolimits4web any update on this?

[jonasmarco]

Any news?
It's a big problem :(

[muratdogan17]

Different day, same problem :/

[durchanek]

Unfortunately, @nolimits4web explained in #2900 this is considered a feature, so I wouldn't expect it to change anytime soon. In my humble opinion, I can't se any use case in which you want to have three same images looping around and it remained me of this picture instead (no offence here, I still LOVE this library).

[dlwickander]

Same for me - please fix - this is not a feature IMHO

[ardavan-ansari]

I doubt this will be of any help, but my issue was resolved when I removed init:false on my swiper instance.
Maybe they are somehow related?

[AlexWayfer]

This is still an issue. Please, reopen it . If you think that it's a feature — OK, let's make it configurable. For example, non-binary values:

loop: true,
watchOverflow: "true-for-loop"

[AlexWayfer]

Work-around:

loop: slidesCount > 1,
watchOverflow: true

You have to get slidesCounts yourself, as you want.

[robizzt]

This is my solution.

var slider = document.querySelectorAll('.swiper-container')[0];
if (slider) {
    var sliderSwiper = new Swiper(slider, {
        init: false,
        // Options...
    });
    // Hide/Show pagination on initialization (and, if you have breakpoints, on resize)
    sliderSwiper.on('init resize', function() {
        var sliderRealSlides = slider.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)'),
            sliderPagination = slider.querySelectorAll('.swiper-pagination')[0];
        if (sliderRealSlides.length <= this.params.slidesPerView) {
            sliderPagination.style.display = 'none';
        } else {
            sliderPagination.style.display = 'block';
        }
    });
    sliderSwiper.init();
}