Swiper: Request - hide pagination dots if only 1 "page"

[lougreenwood]

This is a (multiple allowed):

• [] bug
• [x] enhancement
• [x] feature-discussion (RFC)

• Swiper Version: 4.2.2.
• Platform/Target and Browser Versions: ALL.
• Live Link or JSFiddle/Codepen or website with issue: N/A

What you did

• Created a multi-row swiper which has it's contents dynamically updated (slides added/removed).
• On initial load, only 1 "page" may have slides, so the pagination button is a distraction.
• Swipers may or may not have slides dynamically added as the user interacts with the application

Expected Behavior

• If a swiper contains only 1 "page", dynamically hide the pagination dots.
• If more slides are dynamically added (e.g lazy loaded) and this results in total "pages" > 1, dynamical add the pagination buttons.
• If total "pages" > 1 and slides are destroyed, evaluate and dynamically hide the pagination dots.

Actual Behaviour

If pagination is enabled, page dots are shown, even if only 1 "page" is visible (aka no swiping) - this decreases the usability and is likely to confuse end users - after all, pagination is only useful if there are multiple pages 😃

[nolimits4web]

Why not just hiding/disabling pagination when you have only one page?

[lougreenwood]

I guess that's possible, but it seems a feature like this would be better suited to being part of the library so that all users get the same baseline UX improvement.

Personally, I can't think of any scenario where showing a pagination dot with only 1 slide/page is a benefit to UX...

I'd offer to contribute, but I'm a PHP dev, my JS knowledge is very limited.

[jfleblanc]

Correct me if i'm wrong, but you could simply set { watchOverflow: true } and as long as your single slide isn't wider than .swiper-container, it should do the trick.

[steve231293]

+1 for this needed request.

Swiper pagination shouldn't show when just has single dot.

Swiper Pagination need recalculate visibility when has loop, has breakpoint, slidesPerGroup

Please help.

[MixMe]

+1

[lougreenwood]

Looks like watchOverflow: true works for me 👍

Edit:
@jfleblanc - you were correct - thanks!

[steve231293]

Thank jfleblanc, everything's working perfect.

[PersianArt]

watchOverflow: true not work when loop is true,

@nolimits4web, First of all I must say thanks for this great free slider.
Indeed when you have only 1 slide it means you can not go to next or previous slide because there is nothing to do then the pagination, navigation, scrollbar must not show even when the loop is true, or at least needs option to show/hide them.

I think this is increase usability and I suggest consider this or put option for it,

Thanks

[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.

[yuchant]

+1. Use case is responsive. Currently have pagination only on small displays..

[Seanom]

This is how we approach the single pagination button, when we reduce the viewport width we change the amount we display so smaller viewports include the dots and are visible but increase the width to display all the slides and we just hide it.

.swiper-pagination-bullet:only-child {
    visibility: hidden;
}

[steve231293]

Seanom's solution is working, but it can appear unexpected white space while it has margin or padding.

[MuneebRabaney]

I used pagination: ' ' and it worked like a charm. using swiper version 4.5.0

My end code looks like this

<SwiperCarousel
  breakpoints={{
    '1366': {
      slidesPerView: 5,
      spaceBetween: 30,
    },
    '1024': {
      slidesOffsetAfter: 50,
      slidesOffsetBefore: 50,
      spaceBetween: 50,
    },
    '991': {
      slidesPerView: 3,
      slidesPerColumn: 1,
      slidesOffsetAfter: 0,
      slidesOffsetBefore: 0,
      spaceBetween: 10,
    },
    '420': {
      pagination: ' ', // Here's where I removed the pagination on 420px screen size
      freeMode: false,
      spaceBetween: 10,
      slidesPerView: 1,
      slidesPerColumn: 1,
      slidesOffsetAfter: 10,
      slidesOffsetBefore: 10,
    },
  }}
  freeMode
  slidesOffset={0}
  slidesPerView={5}
  spaceBetween={40}
  slidesPerColumn={1}>
  { this.renderUpgradeColorsFromUpgradeItemCategory({ index }) }
</SwiperCarousel>

Hopefully this helps someone as well

[liho98]

thanks, @Seanom i prefer your css solution!