Swiper slidesperview auto не работает

Infinite loop with slidesPerView: auto, loopFix() issues #2942

Comments

nadamai commented Jan 10, 2019 •

This is a (multiple allowed):

Swiper Version: 4.4.6 (also tested 4.4.x versions and the problem persists)

Platform/Target and Browser Versions: all platforms and browsers I’ve been testing: Windows/Android and Chrome/Opera/Firefox (the most actual versions)

What I did

I use swiper with the following settings (the «big case»):

+some css styles (I did put them in codepens). After some experiments I’ve managed to recreate the issue only with these settings (the «small case»):

I don’t know if solving problem for the «small case» will be sufficient for solving the «big case», but for sure it’s a good way to start.

Behavior

If I slide to the left, everything seems fine (unless the screen is very big or there are too few slides, i.e. 2), but when I swipe to the right, duplicated elements won’t show up on the right side of the slider, which causes a huge empty space after the slides. It’s even worse if I swipe very fast (it may cause the whole container to be empty for a moment). Occasionally the slider updates and the duplicates «jump in» to the right place, but it’s too soon, so it looks bad and may be confusing for the user.

I could find some similar issues here on GitHub, but none of the presented fixes worked for me. For instance I’ve been playing with loopedSlides and loopAdditionalSlides options (i.e. I’ve been trying to put there some huge values like slidesNum , 2 * slidesNum , 10 * slidesNum , 50 or slidesNum — 1 , where slidesNum contains the initial slides number). It didn’t help.

Moreover I’ve got impression that changing loopAdditionalSlides value option is doing literally nothing. In the docs it’s said that it’s the «number of slides that will be cloned after creating of loop», but as far as I could see, number of cloned slides is always equal to the number of original slides — please correct me if I’m wrong. So technically, how does this option work?

The other thing I’ve tried was translating the slider manually when the very last slide appears on the screen, but then I had problems with smooth movement/free mode momentum (see «Big case»).

Attemption to fix this

I’ve been trying to modify swiper.js script in order to make it work. First of all I’ve noticed that the method loopFix is responsible for «fixing» the loop (to be more specific it handles the translation of slider if some conditions are met). These conditions look like this:

First of all I replaced the 2 multiplier in the second condition with 1 (to tell the truth I couldn’t understand why the 2 is there, as activeIndex >= loopedSlides is the opposite condition to the activeIndex ). Can some good soul explain me why there is 2 ? Thanks!

Secondly I used the console.log and observed that the first condition for negative oversliding was sometimes fulfilled even though I was swiping to the positive direction, so I decided to fix this by imposing some additional condition here related to the sliding direction. So I got something like this:

In general this fix may not be sufficient for some RTL settings, but it helped a little bit in my case. Here is an example: «attemption to fix» codepen.

As you can see it may seem to work now, but there are still some problems:

• variable dir has got wrong value after first swipe in the opposite direction (for example if we are swiping left and then we swipe right for once, the dir variable still evaluates to ‘left’ not to ‘right’; it’ll have the correct value ‘right’ only if we swipe right for the second time and further). So the problem still may occur in these kinds of situations.
• fast swiping can still cause swiper container to be partially empty; in the worst scenario I could limit the maximum slider speed, but it’s not very user friendly
• (hard to reproduce) I’m not sure if it concerns the small case, but for the big case in Opera and Chrome browsers some random swiping may cause an infinite script loop (more precisely the method swiper.loopFix(); in line 3038 of the swiper.js (ver. 4.4.6) starts to run infinitely, causing the whole slider to freeze).

The text was updated successfully, but these errors were encountered:

Источник

With slidesPerView ‘auto’, last slide doesn’t get the active class #2571

Comments

silviaaimone commented Apr 6, 2018

This is a (multiple allowed):

Swiper Version: 4.2.2

Platform/Target and Browser Versions: Windows 10, Chrome 65

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.

The text was updated successfully, but these errors were encountered:

nolimits4web commented Apr 10, 2018

This is by design, because active class depends on position

silviaaimone commented Apr 11, 2018 •

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 commented Jul 24, 2018

Hi, any fix for this bug? I can’t resolve it —‘

yursile commented Oct 21, 2018

Hi, any fix for this bug? I can’t resolve it —‘

bridgeting commented Dec 29, 2018 •

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

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 commented Jun 20, 2019 •

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.

or even completely replacing it by cloning the settings.

Источник