Swiper: Swiping on a slide does not update the pagination active state on iOS Devices

[vtatarinov]

This is a (multiple allowed):

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

• Swiper Version: 4.4.2.
• Platform/Target and Browser Versions: iOS 10 and above.

What you did

We have a slider with the following basic settings:
pagination: {
el: '.swiper-pagination',
},

Expected Behavior

When swiping on an iOS device, the pagination buttons should register an active class state change for the correct bullet.

Actual Behavior

Swiping on a slide does not update the pagination active state. Emulating touch on Chrome works but real devices or emulators for iOS show the bug.

[nolimits4web]

Can't see such issue, would be good to see live example or JSFiddle

[techytuppers]

@nolimits4web - Hello! We have the same issue as reported here. Have upgraded to 4.5.0 locally and issue remains.

Example: https://www.rapha.cc/gb/en/collections/pro-team/category/pro-team (v 4.4.2)
This is replicable in BrowserStack using real device

• iPhone 6S, iOS v11, Safari

We do find it can be intermittent which adds complication!

[techytuppers]

To add to the investigation here, it seems that on devices where this is an issue, the contents of the Swiper object is very different. Duplicate properties seem to exist?

In order to get around the original pagination issue, I tried to force a pagination update
carousel.on("slideChange", function() { carousel.pagination.update(); });

This appears to help initially, until the user scrolls, the carousel exits the viewport, and then the user scrolls back in, the pagination.update(); appears to no longer work. The slideChange runs, but the pagination.update() doesn't appear to have any effect.

[AxelHo]

Hi,
Same Problem with simulateTouch on Desktop Browsers.
Any news here?

[VaninaDzhuteva]

Hi,
Same Problem with simulateTouch on Desktop Browsers.
Any news here?

Hello,
I have the same issue. Is there any progress on that topic?
Thanks!

[moi12fre]

I got the same issue, please help.

Thanks.

[pankrashov]

I got the same issue, please help.

[csmithcreative]

I've got the same issue also. I tried the same fix as @techytuppers too, prior to finding this thread. Is this ever going to be fixed? Did anyone find a workaround? Pretty desperate here.

[csmithcreative]

I've finally found a fix for this after 2 days.

Just to clarify, this issue only occurs when using the bulleted pagination option. It does not happen when using the fraction or scrollbar options.

Device: iPhone 7
OS: iOS 13.3.1

Solution:
Use the hashNavigation approach as detailed here - https://github.com/nolimits4web/Swiper/blob/master/demos/330-hash-navigation.html

Step 1 - Add the data-hash markup.

<div class="swiper-slide" data-hash="slide1">
    <!-- your content -->
</div>
<div class="swiper-slide" data-hash="slide2">
    <!-- your content -->
</div>
<div class="swiper-slide" data-hash="slide3">
    <!-- your content -->
</div>

Step 2 - Add the config to the script.
```
var swiper = new Swiper('.swiper-container', {
hashNavigation: {
watchState: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});

[MarkHTML]

For me, where I had multiple sliders on a page it was becoming an issue, actually the last slider would control the first sliders dots. However specifying a unique ID instead of a class for the swiper pagination element did the trick. For me I dynamically create the pagination element with a unique ID for each instance before I create a new swiper js instance, then I pass that unique ID as the 'pagination el' in the option.
var uniquie_id = 'pagination-'+Math.floor(Math.random() * 10000); var bullets_html = '<div class="swiper-pagination" id="'+uniquie_id+'"></div>'; swiperEl.innerHTML += bullets_html; var bullets_el = '#'+uniquie_id;

Then I specify that ID later:

pagination: { el: bullets_el, clickable: true },

[yacovonthego]

I've finally found a fix for this after 2 days.

Just to clarify, this issue only occurs when using the bulleted pagination option. It does not happen when using the fraction or scrollbar options.

Device: iPhone 7
OS: iOS 13.3.1

Solution:
Use the hashNavigation approach as detailed here - https://github.com/nolimits4web/Swiper/blob/master/demos/330-hash-navigation.html

Step 1 - Add the data-hash markup.

<div class="swiper-slide" data-hash="slide1">
    <!-- your content -->
</div>
<div class="swiper-slide" data-hash="slide2">
    <!-- your content -->
</div>
<div class="swiper-slide" data-hash="slide3">
    <!-- your content -->
</div>

Step 2 - Add the config to the script.

    var swiper = new Swiper('.swiper-container', {
        hashNavigation: {
            watchState: true,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

This solution for me forces vertical scroll, on blocks with hash attribute, is there any other workaround?

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

[IamCrism]

I've finally found a fix for this after 2 days.

Just to clarify, this issue only occurs when using the bulleted pagination option. It does not happen when using the fraction or scrollbar options.

Device: iPhone 7
OS: iOS 13.3.1

Solution:
Use the hashNavigation approach as detailed here - https://github.com/nolimits4web/Swiper/blob/master/demos/330-hash-navigation.html

Step 1 - Add the data-hash markup.

<div class="swiper-slide" data-hash="slide1">
    <!-- your content -->
</div>
<div class="swiper-slide" data-hash="slide2">
    <!-- your content -->
</div>
<div class="swiper-slide" data-hash="slide3">
    <!-- your content -->
</div>

Step 2 - Add the config to the script.

    var swiper = new Swiper('.swiper-container', {
        hashNavigation: {
            watchState: true,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

@csmithcreative
To be clear, your solution does not work with the bulleted pagination.
If i have to use the bulleted pagination (for example as preview-images) there is currently no solution right?

[janwram]

I had the same issue and used custom pagination as workaround:

CSS:

<style>
    .swiper-container-horizontal > .swiper-pagination-custom .swiper-pagination-bullet {
      margin: 0 4px;
    }
 </style>

JS:

var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type: 'custom',
        renderCustom: function (swiper, current, total) {
          var out = ''
          for (i = 1; i < total+1; i++) {
            if (i == current) {
              out = out + '<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex='+i+' role="button" aria-label="Go to slide '+i+1+'"></span>';
            }
            else {
              out = out + '<span class="swiper-pagination-bullet" tabindex='+i+' role="button" aria-label="Go to slide '+i+1+'"></span>';
            }
          };
          return out;
        },
      }
});,