swiper 슬라이더 질문드립니다.

swiper 슬라이더 질문드립니다.

QA

swiper 슬라이더 질문드립니다.

본문

안녕하세요

swiper slider 를 적용중인데요

 

pagination 에 효과를 주고있습니다.

active 상태일때 delay 시간에 따라 좌측에서 우측으로 애니메이션을 주고 있습니다.

(슬라이드 노출시간동안 버튼색이 채워지는..)

 

소스는 아래와 같습니다.

 


  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" data-swiper-autoplay="1000" data-type="img"><img src="img/slide1.jpg"></div>
      <div class="swiper-slide" data-swiper-autoplay="2000" data-type="img"><img src="img/slide2.jpg"></div>
      <div class="swiper-slide"data-swiper-autoplay="3000" data-type="img"><img src="img/slide3.jpg"></div>
    </div>
        <div class="progressbar-pagination">
          <div class="swiper-pagination"></div>
        </div>
  </div>
 
 
 
 
  <script>
    var swiper = new Swiper(".mySwiper", {
    speed: 350,
    loop: true,
    autoplay: {
      disableOnInteraction: false,
    },
    mousewheel: false,
    keyboard: {
      enabled: true
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        var delay = this.slides[index+1].dataset.swiperAutoplay;
        return '<div class="' + className + '" data-delay="'+delay+'"></div>';
      },
    },
    on: {
      paginationUpdate: function (sw,el) {
        $(el).find('.swiper-pagination-bullet').html('');
        var bar = $(el).find('.swiper-pagination-bullet-active');
        $('.swiper-progressbar .bar').stop().css({width: 0}).animate({
          width: 100+'%'
        }, parseInt($(bar).data('delay')));
        $('.swiper-pagination-bullet').html('');
        bar.html('<span class="bar"></span>');
        bar.find('.bar').stop().css({width: 0}).animate({
          width: 100+'%'
        }, parseInt($(bar).data('delay')));
      }
    }
    });
  </script>
 

 

 

 

      renderBullet: function (index, className) {
        var delay = this.slides[index+1].dataset.swiperAutoplay;
        return '<div class="' + className + '" data-delay="'+delay+'"></div>';
      },

 

이 부분만 빼면 pagination 부분은 작동이 잘되는데

슬라이드 노출시간동안 버튼색이 채워지는 애니메이션이 작동되질 않습니다.

 

혹시 알고계신 고수님 있으시면 가르침 부탁드립니다. ㅠ

감사합니다.

이 질문에 댓글 쓰기 :

답변 1

this.slides[index+1]에서 +1을 빼보세요



 var delay = this.slides[index].dataset.swiperAutoplay;

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

회원로그인

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