탭안에서 swiper 슬라이더 사용시 autoplay가 안되네요..
본문
안녕하세요.
탭 안에서 swiper 사용시
observer: true,
observeParents: true,
를 추가해야 하는것은 해결했습니다.
그러나 2번째 탭을 선택했을때부터는 슬라이더의 autoplay가 멈춰버립니다 ㅠㅠ
제발 답변부탁드립니다!ㅠㅠ
<div class="tab">
<button class="tablinks" onclick="openPartner(event, 'Business')">기업</button>
<button class="tablinks" onclick="openPartner(event, 'Public')">공공</button>
</div>
<div id="Business" class="tabcontent" style="display:block;">
<div class="pa_slider">
<div class="pa-role swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="round-item">slider01</div></div>
<div class="swiper-slide"><div class="round-item">slider02</div></div>
<div class="swiper-slide"><div class="round-item">slider03</div></div>
</div>
</div>
</div>
<div id="Public" class="tabcontent" style="display:block;">
<div class="pa_slider">
<div class="pa-role swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="round-item">slider01</div></div>
<div class="swiper-slide"><div class="round-item">slider02</div></div>
<div class="swiper-slide"><div class="round-item">slider03</div></div>
</div>
</div>
</div>
function openPartner(evt, pName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(pName).style.display = "block";
evt.currentTarget.className += " active";
$(function () {
var swiper = new Swiper(".pa-role.swiper-container", {
slidesPerView: 6,
slidesPerGroup: 1,
spaceBetween : 25,
loop: true,
loopFillGroupWithBlank: true,
observer: true,
observeParents: true,
autoplay: {
delay: 1000,
disableOnInteraction: false
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
});
!-->!-->!-->
답변 1
슬라이드 갯수가 부족해서 자동재생이 안되는것 같습니다.
갯수를 늘린후에 다시 확인해보셔요
<div id="Public" class="tabcontent" style="display:block;">
<div class="pa_slider">
<div class="pa-role swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="round-item">slider01</div></div>
<div class="swiper-slide"><div class="round-item">slider02</div></div>
<div class="swiper-slide"><div class="round-item">slider03</div></div>
<div class="swiper-slide"><div class="round-item">slider04</div></div>
<div class="swiper-slide"><div class="round-item">slider05</div></div>
<div class="swiper-slide"><div class="round-item">slider06</div></div>
</div>
</div>
</div>