swiper 슬라이더를 탭 안에서 작동 시킬 시 두번째 탭부터 버벅거리는 현상이 발생한다.
이 문제는 탭이 css에서 display:block으로 만들어진 경우인데
아래의 탭을 사용하면 문제 해결
https://jsfiddle.net/mikij1029/1yjLo3pn/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" /> <div class="tabs"> <input type="radio" name="tabs" id="tabone" checked="checked" class="tabInput" value="1"> <label for="tabone">Tab One</label> <div class="tab"> <!-- Swiper --> <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper1"> <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 swiper-slide-prev">Slide 4</div> <div class="swiper-slide swiper-slide-active">Slide 5</div> <div class="swiper-slide swiper-slide-next" style="width: 575px;">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> <!-- Add Arrows --> <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div> <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false"></div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div> </div> <input type="radio" name="tabs" id="tabtwo" class="tabInput" value="2"> <label for="tabtwo">Tab Two</label> <div class="tab"> <!-- Swiper --> <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper2"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-active">Slide 1</div> <div class="swiper-slide swiper-slide-next">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> <!-- Add Arrows --> <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div> <div class="swiper-button-prev swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true"></div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 |
html, body {position: relative;height: 100%} body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0} .tabs {display: flex;flex-wrap: wrap} .tabs label {width: 50%;order: 1;display: block;padding: 10px 0;text-align: center;cursor: pointer;background: #838487;font-weight: 700;transition: background ease .2s} .tabs .tab {order: 99;flex-grow: 1;width: 100%;display: none;padding: 1rem;background: #92B6D5} .tabs input[type="radio"] {display: none} .tabs input[type="radio"]:checked+label {background: #92B6D5} .tabs input[type="radio"]:checked+label+.tab {display: block} .swiper-container {width: 50%;height: 300px} .swiper-slide {text-align: center;font-size: 18px;background: #fff;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); let tabInputs = document.querySelectorAll('.tabInput'); tabInputs.forEach(function(input) { input.addEventListener('change', function() { let id = input.value; let thisSwiper = document.getElementById('swiper' + id); thisSwiper.swiper.update(); }); }); |