React-id-swiper: swiper loop not working

[krustina]

I have a swiper with 5 slides. I have an issue when passing these parameters:

...
render() {
        const params = {
            direction: 'horizontal',
            paginationClickable: true,
            autoplay: 10000,
            autoplayDisableOnInteraction: false,
            loop:true
        };

for whatever reason, it will loop through once, and then when it gets back to the first slide, it wont continue. I inspected the elements and there are 6 slide divs in place...

I tried passing these parameters, and they fixed the issue in a sort of hacked way:

...
render() {
        const params = {
            direction: 'horizontal',
            paginationClickable: true,
            autoplay: 10000,
            autoplayDisableOnInteraction: false,
            slidesPerView:'auto',
            initialSlide:3,
            loop:true,
            loopedSlides:1,
        };

In this case, my slides no longer display in the order i placed them in the html, so i need to pass 'initialSlide: 3' to get to my 'first' slide... which is weird...

And the other issue with this fix is that when the user swipes, it almost skips back at the last slide and glitches. I'm developing this for a web-view app, and i've seen this issue on every mobile device i've tested on, and can also reproduce it in my browser. So it is most definitely an issue with the swiper itself.

Can you offer any help with this?

[kidjp85]

Hi @krustina , can I have a more detail look of your slide code ? Cause I tried your params in the demo and it worked without any problem

import React from 'react';
import Slider from './common/slider';

export default (props) => {
  const params = {
    direction: 'horizontal',
    paginationClickable: true,
    autoplay: 1000,
    autoplayDisableOnInteraction: false,
    loop:true
  }

  return(
    <Slider title="Loop Mode / Infinite Loop" params={params} id={props.id} />
  )
};