탭메뉴+swiper슬라이드 사용시 화면 멈춤현상 어떻게 하나요?
관련링크
본문
탭메뉴와 swiper를 여러개 같이 쓰려고 합니다.
잘 나오기는 하는데, 두번째 탭을 클릭하면 swiper 슬라이드가 멈춤상태에 있다가 화면을 줄이거나 늘리면 그때 적용이 되서 슬라이드되네요.
* 탭메뉴 없이 swiper를 연속해서 넣으면 잘 됩니다.
탭메뉴에 넣었을때만 안되네요.
고수님들 조언 좀 주세요!! ㅠ_ㅠ
<!--tab menu-->
<div class="history_tab">
<span class="on" rel="history_view_1">tab1</span>
<span rel="history_view_2">tab2</span>
</div>
<div class="history_view_1 history_type_in">
<div class="swiper-container s1">
<div class="swiper-wrapper">
<div class="swiper-slide">내용1</div>
<div class="swiper-slide">내용2</div>
<div class="swiper-slide">내용3</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<script>
$('.history_tab span').click(function(){
var tid= $(this).attr("rel");
$("."+tid).removeClass('history_type_in');
$(".history_type_in").slideUp();
$("."+tid).slideDown();
$("."+tid).addClass('history_type_in');
$(".history_tab span").removeClass("on");
$(this).toggleClass('on');
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.s1', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
var swiper = new Swiper('.s2', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
</script>
