Swiper: The last item in the pagination never becomes "active" in some situations.

Created on 4 Oct 2018  路  6Comments  路  Source: nolimits4web/swiper

This is a (multiple allowed):

  • [x] bug
  • [ ] enhancement
  • [ ] feature-discussion (RFC)
  • Swiper Version: [email protected]
  • Platform/Target and Browser Versions: macOS High Sierra 10.13.6 (Safari browser Version 12.0 (13606.2.11) ).

What you did

Swiper was created with following parameters:

var swiper = new Swiper('.slider-container', {
      speed: 1000,
      slidesPerView: 'auto',
      spaceBetween: 30,
      slidesOffsetAfter: 300,
      visibilityFullFit: true,
      autoResize: true,
      pagination: {
        clickable: true,
        el: '.slider-pagination',
        type: 'bullets'
      },
      breakpoints: {
        1200: {
          slidesOffsetAfter: 100
        }
      }
    });

Two slides in view are shown and third slide is only partially visible at right side of the screen with opacity set to 0.5. There are many slides that are out of the bounds of the right side of the screen.

Expected Behavior

When swiping to last element last (and last-1) element is not being set as active.

For example this is the last scrolled slide, but DOM looks like this:

Image

Actual Behavior

When user scrolls to last slide, last slide should be active.

Same issue as described here:
#391

It was closed, but looks like issue still exists.
Last element never gets active state.

This limits the styling of gallery (for example if it is required that next element that is out of the screen should be transparent).

stale

All 6 comments

Like in this example, the Slide 10 never gets the active class, but pagination works pretty.
http://idangero.us/swiper/demos/120-slides-per-view-auto.html

this is ie bug. 馃槥
but pagination works fine.

Same Problem in all tested browsers.

I have a similar problem. I need to add some specific styles to all active slides in view (I have three, but the 'active' class has only the first slide in view). How can I do that?

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.

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

Was this page helpful?
0 / 5 - 0 ratings