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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
탭안에서 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>

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

회원로그인

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