Should the Swiper "watchOverflow" parameter hide pagination?

I noticed a single pagination dot is showing when there is one slide while using the “watchOverflow” parameter to hide navigation. Just wondering if it’s meant to hide it?

Yes, it is suppose to hide it, and from what i see it is working. Do you still see pagination dots when there is insufficient slides? Can you show some live example or jsfiddle or you swiper config?

Thanks. Here is a live example https://pause-drink-pwa-dev.firebaseapp.com/

The Swiper is within a Popup.

        let swiper = pauseDrink.swiper.create('.swiper-container', {
            effect: 'fade',
            speed: 20,
            watchOverflow: true, // This checks if there's only one slide and disables swiper if true
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            on: {
                slideChange: () => {
                    pda.sound.whoosh.play();    
                }
            }
        });

It looks like the pagination is getting the class “swiper-pagination-lock” and that should be targeted by the CSS. I’ve done a custom F7 build:

const config = {
  target: 'universal',
  rtl: false,
  components: [
    // Appbar
    // 'appbar',

    // Modals
    'dialog',
    'popup',
    // 'login-screen',
    'popover',
    // 'actions',
    // 'sheet',
    // 'toast',

    // // Loaders
    // 'preloader',
    // 'progressbar',

    // List Components
    // 'sortable',
    // 'swipeout',
    'accordion',
    // 'contacts-list',
    // 'virtual-list',
    // 'list-index',

    // // Timeline
    // 'timeline',

    // // Tabs
    // 'tabs',

    // // Panel
    // 'panel',

    // // Card
    // 'card',

    // // Chip
    // 'chip',

    // Form Components
    'form',
    'input',
    'checkbox',
    // 'radio',
    'toggle',
    'range',
    // 'stepper',
    // 'smart-select',

    // // Grid
    // 'grid',

    // // Pickers
    // 'calendar',
    // 'picker',

    // // Page Components
    // 'infinite-scroll',
    // 'pull-to-refresh',
    // 'lazy',

    // // Data table
    // 'data-table',

    // // FAB
    // 'fab',

    // // Searchbar
    // 'searchbar',

    // // Messages
    // 'messages',
    // 'messagebar',

    // Swiper
    'swiper',

    // // Photo Browser
    // 'photo-browser',

    // Notifications
    'notification',

    // // Autocomplete
    // 'autocomplete',

    // // Tooltip
    // 'tooltip',

    // // Gauge
    // 'gauge',

    // // Skeleton
    // 'skeleton',

    // // Menu
    // 'menu',

    // // Color Picker
    // 'color-picker',

    // // Tree View
    // 'treeview',

    // // VI Video Ads
    // 'vi',

    // // Elevation
    // 'elevation',

    // // Typography
    // 'typography',
  ]

Easy fix for me to target “swiper-pagination-lock” but I wonder why that style isn’t coming through automatically?

Ok, looks like some bundling issue, i see this class is in source but not in final package. For now, you can just add this code to your CSS:

.swiper-pagination-lock {
  display: none;
}
1 Like