탭안에서 swiper 슬라이더 사용시 autoplay가 안되네요.. 채택완료

안녕하세요.

탭 안에서 swiper 사용시

        observer: true,
        observeParents: true,

를 추가해야 하는것은 해결했습니다.

그러나 2번째 탭을 선택했을때부터는 슬라이더의 autoplay가 멈춰버립니다 ㅠㅠ

제발 답변부탁드립니다!ㅠㅠ

Copy
<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>
Copy
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";
Copy
$(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>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

예시로 적느라 적게 적었는데 실제 데이터는 30개씩 돌아갑니다 ㅠㅠ
slidesperview 도 6개인가요???
30개라면 그 이상있어야해요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고