Swiper: With slidesPerView 'auto', last slide doesn't get the active class

[silviaaimone]

This is a (multiple allowed):

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

• Swiper Version: 4.2.2
• Platform/Target and Browser Versions: Windows 10, Chrome 65
• Live Link or JSFiddle/Codepen or website with isssue: http://idangero.us/swiper/demos/120-slides-per-view-auto.html

What you did

I have just had a look at the "Auto Slides Per View / Carousel Mode" demo

Expected Behavior

The "swiper-slide-active" is correctly added to each slide as you drag the slider or click on the pagination bullets. The last slide should get the active class too.

Actual Behavior

When the slider reach the last slide, either by dragging or clicking on the pagination bullets, the last slide doesn't get the "swiper-slide-active" class.

[nolimits4web]

This is by design, because active class depends on position

[silviaaimone]

Hi, thanks for your answer. I know that technically it depends on position, but logically shouldn't it get the class?
Please have a look at this fiddle: https://jsfiddle.net/h8yp6ss7/5/
Since the last slide never gets the active class, you can't read the text underneath the black overlay. The issue is especially noticeable between slides 9 and 10.

[dannysouza16]

Hi, any fix for this bug? I can't resolve it --'

[yursile]

Hi, any fix for this bug? I can't resolve it --'

[bridgeting]

I get the current slide index by using onTransitionEnd when init swiper

onTransitionEnd(swiper) {  
  slideIndex = Math.abs(Math.floor(swiper.translate / [swiperCardWidth]));  
  if (slideIndex !== 0) {  
    slideIndex = slideIndex - 1;  
  }  
}

may not a good way, but it works for me.
after get the right active index, i can use this index value to do the rest things.

[joelamltc]

I currently experienced the same problems like as many people did and also looked through the issues but no results.

Finally, I found out a way to do it, a better way to do it guys!.

By setting the snapGrid settings as same as the slidesGrid settings after the swiper initialized.
And then the swiper will work as what you expected.

const swiper = new Swiper(
    '.awesome-swiper', 
    {
        init: false,
        direction: 'horizontal',
        speed: 700,
        slidesPerView: 'auto',
        spaceBetween: 80,
    }
);

swiper.init();
swiper.snapGrid[swiper.snapGrid.length - 1] = swiper.slidesGrid[swiper.slidesGrid.length - 1];

or even completely replacing it by cloning the settings.

// can do this way
swiper.snapGrid = swiper.slidesGrid.slice(0);

// or ES6 way
swiper.snapGrid = [...swiper.slidesGrid];