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

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

QA

탭안에서 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>

답변을 작성하시기 전에 로그인 해주세요.
전체 948
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT