[Slide] swiper-slide

기본 세팅

var mainSwiper = new Swiper('.swiper-main-container', {
  hashNavigation: {
    replaceState: true,
    watchState: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  loop:true,
  autoplay: {disableOnInteraction:false},
  on: {
    init: slideInit,
    slideChange: slideChangeEv,
    slideChangeTransitionEnd: slideChangeEndEv
  },
});

 

+ 종종 쓸만한 기능은 상단 고정!

mainSwiper.slideTo(idx)

 

위와 같은 코드는 idx페이지로 이동하라는 뜻이다.

그런데 이 코드를 사용하면 스와이프가 움직이는 모습대로 스르륵 움직이는게 다 보인다!

이러한 움직임이 보여지지않도록 초기화처럼 보이게 하려면 다음과 같은 코드를 이용해야 한다.

 

$(".replay_btn").on("click", function () {
  mainSwiper.slideTo(0, 0, false);
  scrollUp2(0);
  motionArray(this);
});

function scrollUp2() {
  TweenMax.to('body,html', 0, {scrollTop: 0, ease: Power2.easeInOut})
}

클릭될 때라는 예시의 코드로 replay_btn이 클릭되면 slideTo를 통해 0번째 페이지로 이동한다.

 

이때 함수의 각 파라미터는 slideTo(몇번째페이지로, 시간, scrollUp함수 실행하지않을거야)라는 뜻이다.

false를 통해 scrollUp함수를 실행하지 않은 이유는 이것 역시 올라가는 모션이 보이기 때문이고 scrollUp2라는 함수를 따로 만들어서 진행시간을 똑같이 0으로 함으로써 초기화되는것처럼 보이도록 하는 것이다.

 

페이지 이동후 자동으로 모션이 실행되지 않는 오류가 발생해 모션실행함수까지 함께 호출해주면~ 끝~!

 

 

---

Swiper적용

    var bgSwiper = new Swiper(".bgSwiper",{ 
        loop:true,

    });

    var btnSwiper = new Swiper(".btnSwiper",{ 
        loop:false,
        spaceBetween:-140
    });

 

var 이름 = new Swiper(".슬라이드 class명", {효과});

swiper객체를 생성해주어야 페이지에 적용이 된다.

 

loop[true/false]

리스트를 반복할 것인지

 

spaceBetween

absolute로 한 군데에 묶여있는 애들인데 스와이프를 쓰면 알아서 한줄로 정렬이 되는 것 같다....

여기에 spaceBetween값을 적용해서 사이 간격을 조정! -값을 넣어야 한 페이지에 여러개가 보이게 조절할 수 있다.

---

Pagination

bgSwiper.on('slideChangeTransitionStart', function(){
       document.getElementById("page_num").src="images/pagination/num"+(bgSwiper.realIndex+1)+".png";
    });

 

slideChangeTransitionStart 

Swiper의 API인데 슬라이드가 넘어가는 것을 체크해주는 기능이다.

slideChange, slideChangeTransitionStart, slideChangeTransitionEnd 등등이 있는데 slideChangeTransitionStart는 해석상 변환이 시작되는 것을 인식하는거겠지..?

 

.realIndex

역시 Swiper의 API다. API가 뭐뭐있는지 공부를 해야할 듯 싶다..

realIndex는 슬라이드의 현상태를 알아내는 기능이다!

아주아주 유용하게 쓰이는 놈이니 알아두도록 하자 :)

---

자동재생 autoplay

 

var bgSwiper = new Swiper(".bgSwiper",{ 
    loop:true, 
    speed: 1000, 
    slidesPerView: 'auto', 
    centeredSlides: true, 
    watchSlidesProgress: true, 
    autoplay:{disableOnInteraction: false},

    on:{어쩌고 저쩌고....}

 

autoplay
슬라이드 자동 재생

disableOnInteraction (default:true)
autoplay의 파라미터
(: Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction)
--> false로 설정하면 사용자 상호 작용 (스와이프) 후 자동 재생이 비활성화되지 않으며 상호 작용 후 매번 다시 시작됩니다.
!!!!아!!!! 그래서 이 파라미터 없이 delay만 넣었을 때는 손대고 나면 자동재생이 멈췄던거구나... 꼭 설정해줘야겠다

 

 

컨텐츠 스와이프 시 배경과 컨텐츠 묶어주기 + 메뉴 활성화

myswiper.on('slideChangeTransitionStart', function(){

    var hashStr = document

    .querySelector('.swiper-container .swiper-slide-active')

    .getAttribute('data-hash');

    var hashNumber = hashStr.substr(3,1);

 

    var naviImg = document.querySelectorAll('.main');

    for (var i = 0, len = naviImg.length; i < len; i++) {   //비활성화

        naviImg[i].classList.remove('on');

    }

    naviImg[hashNumber-1].classList.add("on");   //활성화

    mainNavSwiper.slideTo(hashNumber-1); //이동

    ...

}

 

swiper-slide-active

스와이프 자체에서 현재 띄워져있는 페이지에 swiper-slide-active라는 class명이 주어진다!

이전꺼는 -prev, 다음꺼는 -next

 

.getAttribute('data-hash');

html에서 data-hash="~~"라는 속성을 사용할 때 사용하는 문법이다. data-hash의 값을 읽어올 수 있음

 

 

 

---

 

* swiper 주로 사용하는 기능

 

[Swiper Parameters]
- autoheight
- speed
- on
- loop

 

* slide
- spaceBetween
- slidesPerView
- centeredSlides

 

* swiping
- allowSlidePrev
- allowSlideNext

 

[Slider Methods & Properties]
- mySwiper.slides
- mySwiper.realIndex
- mySwiper.slideNext(speed, runCallbacks);
- mySwiper.slidePrev(speed, runCallbacks);
- mySwiper.slideTo(index, speed, runCallbacks);
- mySwiper.slideToLoop(index, speed, runCallbacks);
- mySwiper.detachEvents();
- mySwiper.attachEvents();

 

[Events]
- init
- slideChange
- slideChangeTransitionStart
- slideChangeTransitionEnd
- slideNextTransitionStart
- slideNextTransitionEnd
- slidePrevTransitionStart
- slidePrevTransitionEnd
- transitionStart
- transitionEnd

 

[Navigation Parameters]

* navigation
- nextEl
- prevEl

 

[Pagination]

* pagination
- el
- type

 

[Autoplay]

* autoplay
- delay
- mySwiper.autoplay.start();
- mySwiper.autoplay.stop();

 

[Fade Effect]
* fadeEffect

 

[Hash Navigation Parameters]
* hashNavigation

---

swiper api 사이트

swiperjs.com/api/

Swiper API