Swiper: Reverse order slide is shown while slide turn by turn and also the slide which is selected is not shown on large thumbnail

Created on 12 Oct 2019  路  3Comments  路  Source: nolimits4web/swiper

This is a (multiple allowed):

  • [x] bug
  • [ ] enhancement
  • [ ] feature-discussion (RFC)
  • Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.
  • Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.
  • Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.

What you did

Checked Simple Slider working fine or not

Expected Behavior

Slider must be go on to next slide while user click on button turn by turn

Actual Behavior

Slider going to reverse while user try to click button turn by turn

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow
for that.

<div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
            </div>
    </div>



md5-6d234afa6cab498005a3113adcc80dfd





md5-a8fdfa174849cc532285319330209ba5


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
    <script type="text/javascript">
        var galleryTop = new Swiper('.gallery-top', {
          spaceBetween: [10,](url)
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
                loop: true,
                loopedSlides: 4
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
          spaceBetween: 10,
          centeredSlides: true,
          slidesPerView: 'auto',
          touchRatio: 0.2,
          slideToClickedSlide: true,
                loop: true,
                loopedSlides: 4
        });
        galleryTop.controller.control = galleryThumbs;
        galleryThumbs.controller.control = galleryTop;
    </script>

Before you open an issue, please check if a similar issue already exists or has been closed before.

stale

Most helpful comment

I've faced the same issue.

All 3 comments

I've faced the same issue.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

joakimk picture joakimk  路  3Comments

lxmarinkovic picture lxmarinkovic  路  4Comments

TomDeSmet picture TomDeSmet  路  3Comments

magic-77 picture magic-77  路  3Comments

QJan84 picture QJan84  路  3Comments