jQuery/jQuery 슬라이더

스와이퍼 슬라이더 - 페이지네이션(pagination) 숫자 커스텀

hyojinny 2022. 12. 9. 15:12

스와이퍼 슬라이더의 페이지네이션과 숫자 부분을 커스텀 해보자 .

 

 

 

 

이너가 작아진 이유?

 

position: absolute;
줄어드니까
max-width: 1280px;
여도 이너가 작아진다.
 
width: 100%;
설정한다.

그럼 이너가 100% 꽉 찬다

 

 

 

페이지네이션 타입을 프로그래스 바로 변경 (길게)

    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },

 

슬라이더의 선택자가 프로그래스바로 변경된것을 확인하고 class 명을 가져온다

 

.main_slider .swiper-pagination-progressbar {
  position:relative;
  background: rgba(255, 255, 255, 1);
  height: 10px;
}

포인트 바를 조정해주기 위해서 position relative 지정

 

 

 

 

.main_slider .swiper-pagination-progressbar span {
  height: 3px;
  top: -2px;
  background: #fff;
  /* 스판이 기존에 포지션엡솔로 잡혀있음 */
}
 
 
나머지 요소 커스텀해주기
 
 

숫자 페이지넣기

 

 

숫자 넣어야하는데

이미 페이지 네이션을 사용해서 더이상 사용 불가 

슬라이더에 페이지네이션이 2개가 들어갈수 없다.

 

태그를 지정해주어 커스텀해보자

 

스와이퍼가 루프이기때문에 계속 복사해서 넘어간다

복제된 슬라이더에 duplicate 가 중복해서 생성되는 모습

 

 

슬라이더 갯수 구하기

  console.log($('.main_slider .swiper-slide').length);
 

 

console.log($('.main_slider .swiper-slide:not(.swiper-slide-duplicate)').length);

숫자에 복사된 슬라이드 duplicate 클래스명을 가진것을 세지않음

 

 

 

  var total = $('.main_slider .swiper-slide:not(.swiper-slide-duplicate)').length;

  $('.main_slider .total').text(total);
일때 숫자 나오는것 확인.
 
 
 
 
앞에 0 을 붙여주기 위해 변수를 지정해 제이쿼리 설정
 
// 메인 비디오 슬라이더
  var mainSlider = new Swiper('.main_slider', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },
    navigation: {
      nextEl: '.swiper-button-next',
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },

    // swiper 이벤트이용하여 슬라이드가 이동되기저에 액티브슬라이드 안쪽 비디오를 자바스크립트 DOM 으로 변경하여 currentTime = 0, play()

    on: {
      // 슬라이드가 이동되기전에 발생
      slideChangeTransitionStart: function () {
        // console.log($('.main_slider .swiper-slide-active video'));
        // 비디오 처음부터실행
        $('.main_slider .swiper-slide-active video')[0].currentTime = 0;
        $('.main_slider .swiper-slide-active video')[0].play();
      },
      slideChange: function () {
        // 다음 슬라이드 앞에 0을 넣어주기위해 0 뒤에 진짜 숫자를 넣어준다
        $('.main_slider .current').text('0' + (mainSlider.realIndex + 1));
        console.log(mainSlider.realIndex);
      },
    },
  });

  // 메인비디오 슬라이더 숫자 페이지네이션 구하기
  // loop모드일경우 무한복제된 슬라이드는 제외한 슬라이드 갯수세기
  var total = $('.main_slider .swiper-slide:not(.swiper-slide-duplicate)').length;

  $('.main_slider .total').text('0' + total);

 

단 이럴경우 슬라이드가 10장이 넘어갈때 앞에 0이 붙어 010,011 이렇게 나온다. 

 

 

 

 

  // 삼항연산자사용 (? 일때)
  // 조건이 true 일때 오른쪽이 리턴된다
  (total < 10 ) ? '0' + total : total;

 

 

  total = total < 10 ? '0' + total : total;
  $('.main_slider .total').text(total); 
 
 

이때 다시 0이붙어서 나옴

새롭게 변수에 담아줌

 

  // 메인비디오 슬라이더 숫자 페이지네이션 구하기
  // loop모드일경우 무한복제된 슬라이드는 제외한 슬라이드 갯수세기
  var total = $('.main_slider .swiper-slide:not(.swiper-slide-duplicate)').length;

  // 삼항연산자사용 (? 일때)
  // 조건이 true 일때 오른쪽이 리턴된다
  // 오른쪽 숫자부분
  var newTotal = total < 10 ? '0' + total : total;
  $('.main_slider .total').text(newTotal);

 

이떄 변수에 새로 담아줬기때문에 

앞의 숫자가 010.012 이렇게 나온다.

 

때문에 앞의 숫자도 if 문을 걸어 10보다 작은수엔 0을 붙이고, 10이상은 0을 제외한다. 

 

      slideChange: function () {
        // 앞의숫자
        if (mainSlider.realIndex + 1 < 10) {
          $('.main_slider .current').text('0' + (mainSlider.realIndex + 1));
        } else {
          $('.main_slider .current').text(mainSlider.realIndex + 1);
        }
      },

삼항연산자는 너무 길어지기 때문에 if 조건문 사용

 

최종본......... 알수없는 최종본...

 

 

  // 메인 비디오 슬라이더
  function mainVideoSlider() {
    var mainSlider = new Swiper('.main_slider', {
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
      navigation: {
        nextEl: '.swiper-button-next',
      },

      // swiper 이벤트이용하여 슬라이드가 이동되기저에 액티브슬라이드 안쪽 비디오를 자바스크립트 DOM 으로 변경하여 currentTime = 0, play()

      // 속성의 이름 on {} on객체안에 정해진것만 넣을수 있음
      // 스와이퍼에서 설정한 객체만 사용할 수 있다.

      on: {
        // 슬라이드가 이동되기전에 발생
        slideChangeTransitionStart: function () {
          // console.log($('.main_slider .swiper-slide-active video'));
          // 비디오 처음부터실행
          $('.main_slider .swiper-slide-active video')[0].currentTime = 0;
          $('.main_slider .swiper-slide-active video')[0].play();
        },
        slideChange: function () {
          // 앞의숫자
          if (mainSlider.realIndex + 1 < 10) {
            $('.main_slider .current').text('0' + (mainSlider.realIndex + 1));
          } else {
            $('.main_slider .current').text(mainSlider.realIndex + 1);
          }
        },
      },
    });

    // 메인비디오 슬라이더 숫자 페이지네이션 구하기
    // loop모드일경우 무한복제된 슬라이드는 제외한 슬라이드 갯수세기
    var total = $('.main_slider .swiper-slide:not(.swiper-slide-duplicate)').length;

    // 삼항연산자사용 (? 일때)
    // 조건이 true 일때 오른쪽이 리턴된다
    // 오른쪽 숫자부분
    var newTotal = total < 10 ? '0' + total : total;
    $('.main_slider .total').text(newTotal);
  }
  mainVideoSlider();

 

함수 function mainVideoSlider() 로 다시 감아준 이유?

 

 

코드가 너무 길기 때문에 

함수로 다시한번 지정해주어 슬라이드에서 사용하는 함수라고 정의를 내려준다.

변수를 지역변수로 바꾸고 다른곳에서 또 함수사용할 일이 있으면 중복이 되지않기위해

 

저작자표시 비영리 변경금지