Swiper - Auto and back to first slide directly

Questions
1

Hi,

I am creating auto swiper, i would like to display it as Slide1,2,3,4,5 and back again to Slide 1,2,3,4,5 continuously.

it works by using auto. however the rotation is Slide 1,2,3,4,5 but during back to Slide 1, it shows the 4,3,2,1 first. how to make it directly back to Slide 1 ?

Thank you

2

Hi,
just taken from f7-example swiper-loop
1-2-3-4-5-6-7-8-9-10 -> 1-2-3-4-5-6-7-8-9-10 -> 1-2-3-4-5-6-7-8-9-10 -> and so on

<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">Infinite Loop Mode</div>
    </div>
  </div>
  <div class="page-content">
    <div data-pagination='{"el": ".swiper-pagination"}' data-loop="true" class="swiper-container swiper-init demo-swiper">
      <div class="swiper-pagination"></div>
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
      </div>
    </div>
  </div>
</div>
1 Like
3

Hi,

during changing from slide 10 back to slide 1 again, it is ‘scrolled’ you can see slide 9,8,7,…1 fast enough/flicker, which i dont want. it is not directly changed from 10 to 1.

Thank you

4

Hi,
i dont see the ‘scroll’ , it looks fine to me. Can you make a fiddle with the ‘error’?
swiper-infinite

5

Hi ,

here is the fiddle, if you see until slide 10, it goes back to slide 1, but it is ‘scrolling’ from slide 9,8,… which i dont want to see it. i wiould like it goes from slide 10 rotate to slide 1 directly…

https://jsfiddle.net/fransg/98j0y1pa/

Thank you

6

Hi, you were in the right path with loop: true, all you need to do is add the amount of slides to loop:

var swiper = app.swiper.create('.swiper-container', {
    speed: 1500,
    //slidesPerView: auto,
    // If set to true, its mandatory to specify slides to loop.
    loop: true,
   // Add the slides to loop
    loopedSlides: 10,
    autoHeight: true,![swiperloop|600x317](upload://ur1okCiYShzbwrIsLN5GEYAJ9n4.gif)
    shortSwipes: false,
    longSwipes: false,
    //effect:'fade'
    //spaceBetween: 100
});

Here you can read the api:
http://idangero.us/swiper/api/

loop boolean false
Set to true to enable continuous loop mode

If you use it along with slidesPerView: ‘auto’ then you need to specify loopedSlides parameter with amount of slides to loop (duplicate)
Also, because of nature of how the loop mode works, it will add duplicated slides. Such duplicated classes will have additional classes:
swiper-slide-duplicate - represents duplicated slide
swiper-slide-duplicate-active - represents slide duplicated to the currently active slide
swiper-slide-duplicate-next - represents slide duplicated to the slide next to active
swiper-slide-duplicate-prev - represents slide duplicated to the slide previous to active
loopAdditionalSlides number 0 Addition number of slides that will be cloned after creating of loop
loopedSlides number null If you use slidesPerView:‘auto’ with loop mode you should tell to Swiper how many slides it should loop (duplicate) using this parameter
loopFillGroupWithBlank boolean false Enable and loop mode will fill groups with insufficient number of slides with blank slides. Good to be used with slidesPerGroup parameter

Result 9 -> 10 -> 1:
swiperloop

1 Like
7

Hi,

Thank you very much !

8

its not working in ngx-swiper-wrapper, how can I solve it ?
thanks in advance