swiper 슬라이더를 탭 안에서 작동 시킬 시 두번째 탭부터 버벅거리는 현상이 발생한다.
이 문제는 탭이 css에서 display:block으로 만들어진 경우인데
아래의 탭을 사용하면 문제 해결
|
1 |
<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 |
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 |
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();
});
}); |