Double width slides with single width slides.

[ee0jmt]

I am using swiper js and I would like to be able to show 2 single width slides on a view, but also have double width slides that only show one on a view. So slide 1 and 2 (both single width) show on view 1 and then when I swipe to view 2 it shows only slide 3 (double width), then swiping to view 3 shows slide 4 and 5 (both single width).

I almost have this working using the demo code from the website. See JS Fiddle:

https://jsfiddle.net/ee0jmt/kcw6L2fo/13/

The problem I have is, swiping from view 1 to view 2 shows slide 2 and part of slide 3. Swiping the other way seems to be fine.

I only want to show whole slides. Either 2 slides per view for single width slides or 1 slide for a double width slide.

Is there a way to do this?

[rtabulov]

so if the first and second slide always come together, why not just put them in one slide?

what i mean is something like this

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
        <div>
            Slide 1
        </div>
        <div>
            Slide 2
        </div>
    </div>
    <div class="swiper-slide">Slide 3</div>
    .
    .
    .
  </div>
  <div class="swiper-pagination"></div>
</div>