swiper 슬라이더가 loop : true 및 centeredSlides : false로 작동하지 않습니다.

Question

루프가 true로 설정되고 centeredSlides가 false로 설정된 상태에서 Swiper 슬라이더가 제대로 작동하지 않습니다.

메인 슬라이더에 활성 섬네일이 표시되지 않고 검색이되지 않아 아무 해결책도 찾지 못했지만 다른 사람이 가지고 있지 않은 상태에서 해결 방법을 알고 있다면 감사하게 생각합니다. 현재 옵션을 제거하지 않습니다.

다음은 JSFiddle

var galleryTop = new Swiper('.gallery-top', { 
 
\t \t \t 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>

Answer 1

당신이

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

처럼 뭔가를 할 수 있어요 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

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%; 
} 

이 시도주십시오.