2026, 새로운 도약을 시작합니다.

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

안녕하세요.

탭 안에서 swiper 사용시

        observer: true,
        observeParents: true,

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

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

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

Copy




   기업

   공공





   

      

         

            slider01

            slider02

            slider03

         

   





   

      

         

            slider01

            slider02

            slider03

         

   



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개라면 그 이상있어야해요

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

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

로그인
🐛 버그신고