Question

129

Swiper slider not working as expected with loop: true and centeredSlides: false

rated 0 times [ 132] [ 3] / answers: 1 / hits: 41599 / 7 Years ago, wed, november 29, 2017, 12:00:00

Swiper slider is not working properly with loop set to true and centeredSlides set to false.

When a thumbnail or a navigation arrow is clicked the main slider doesn't show the active thumbnail, i searched and didn't found any solution for this, i'll be grateful if someone knows how to solve it without having to remove none current options.

Here's the JSFiddle

var galleryTop = new Swiper('.gallery-top', {

			slidesPerView: 1,  

      loop: true,

      navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

      },

    });

    var galleryThumbs = new Swiper('.gallery-thumbs', {

      direction: 'vertical',

      slidesPerView: 4,

      slideToClickedSlide: true,

      spaceBetween: 10,

      loop: true,

    });

    galleryTop.controller.control = galleryThumbs;

    galleryThumbs.controller.control = galleryTop;

body {

  padding: 20px;

}



.gallery-thumbs {

  float: left;

  width: calc(16% - 20px);

  height: 280px;

  margin-right: 20px;

}



.gallery-thumbs .swiper-slide {

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  cursor: pointer;

}



.gallery-thumbs .swiper-slide-active {

  border: 1px solid grey;

}



.gallery-thumbs .swiper-slide:hover {

  border: 1px solid grey;

}



.gallery-top {

  float: left;

  width: 84%;

  height: 280px;

}



.gallery-top .swiper-slide {

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  border: 1px solid grey;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js></script>

<link href=https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css rel=stylesheet/>

<div class=swiper-container gallery-thumbs>

  <div class=swiper-wrapper>

     <div class=swiper-slide>1</div>

     <div class=swiper-slide>2</div>

     <div class=swiper-slide>3</div>

     <div class=swiper-slide>4</div>

     <div class=swiper-slide>5</div>

     <div class=swiper-slide>6</div>

  </div>

</div>

<div class=swiper-container gallery-top>

  <div class=swiper-wrapper>

   <div class=swiper-slide>1</div>

     <div class=swiper-slide>2</div>

     <div class=swiper-slide>3</div>

     <div class=swiper-slide>4</div>

     <div class=swiper-slide>5</div>

     <div class=swiper-slide>6</div>

  </div>

  <!-- Add Arrows -->

  <div class=swiper-button-next></div>

  <div class=swiper-button-prev></div>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carlton

Add To Favorites

Follow

Total Points: 373

Total Questions: 123

Total Answers: 97

Location: Saint Helena

Member since Wed, Nov 9, 2022

2 Years ago

answered 7 Years ago chase · Accepted Answer

You can Do Something Like this

HTML

 <div class=swiper-container gallery-top>

        <div class=swiper-wrapper>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/1)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/2)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/3)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/4)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/5)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/6)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/7)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/8)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/9)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/10)></div>

        </div>

        <!-- Add Arrows -->

        <div class=swiper-button-next swiper-button-white></div>

        <div class=swiper-button-prev swiper-button-white></div>

    </div>

    <div class=swiper-container gallery-thumbs>

        <div class=swiper-wrapper>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/1)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/2)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/3)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/4)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/5)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/6)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/7)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/8)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/9)></div>

            <div class=swiper-slide style=background-image:url(http://lorempixel.com/1200/1200/nature/10)></div>

        </div>

    </div>

CSS

html, body {

  position: relative;

  height: 100%;

}



body {

  background: #000;

  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

  font-size: 14px;

  color: #000;

  margin: 0;

  padding: 0;

}



.swiper-container {

  width: 100%;

  height: 300px;

  margin-left: auto;

  margin-right: auto;

}



.swiper-slide {

  background-size: cover;

  background-position: center;

}



.gallery-top {

  height: 80%;

  width: 70%;

  margin: 0;

  margin-left: auto;

}



.gallery-thumbs {

  //height: 20%;

  box-sizing: border-box;

  padding: 10px 0;

}



.gallery-thumbs.swiper-container {

  padding: 10px;

  margin: 0px;

}



.gallery-thumbs .swiper-slide {

  height: 30%;

  opacity: 0.4;

}



.gallery-thumbs .swiper-slide-active {

  opacity: 1;

  border: 2px solid #ffa303;

}

.gallery-top{

    float:right;

    width:80%;

}





.gallery-thumbs{

    float:left;

    width:20%;

    height:80%;

}

JS

var galleryTop = new Swiper(.gallery-top, {

  nextButton: .swiper-button-next,

  prevButton: .swiper-button-prev,

  spaceBetween: 10,

  loop:true,

  loopedSlides: 50

});

var galleryThumbs = new Swiper(.gallery-thumbs, {

  spaceBetween: 10,

  slidesPerView: auto,

  touchRatio: 0.2,

  loop:true,

  slideToClickedSlide: true,

  loopedSlides: 50,

  direction:'vertical'

});

galleryTop.params.control = galleryThumbs;

galleryThumbs.params.control = galleryTop;

Codepen Link For Reference

Give this a try.