VUE

vue swiper tip

nyhya 2021. 4. 17. 23:09

 

 

 

<template>

      <swiper ref="mySwiper" :options="swiperOptions">

          <swiper-slide>Slide 1</swiper-slide>

          <swiper-slide>Slide 2</swiper-slide>

          <swiper-slide>Slide 3</swiper-slide>

          <swiper-slide>Slide 4</swiper-slide>

          <swiper-slide>Slide 5</swiper-slide>

           <div class="swiper-pagination" slot="pagination"></div>

     </swiper>

</template>

 

<script>

 

export default {

   name: 'carrousel',

   data() {

      return {

         swiperOptions: {

             pagination: {

                el: '.swiper-pagination'

             },

            // Some Swiper option/callback...

           }

        }

     },

 

    computed: {

         swiper() {

            return this.$refs.mySwiper.$swiper

         }

    },

 

    mounted() {

       console.log('Current Swiper instance object', this.swiper)

       this.swiper.slideTo(3, 1000, false)

   }

}

 

 

 

/* 옵션 */

    swiperOpt: {

        pagination: {

          el: ".swiper-pagination",

          clickable: true,

        },

        navigation: { /

          nextEl: ".swiper-button-next",

          prevEl: ".swiper-button-prev",

        },

        slidesPerView: 1.5, // 한번에 슬라이드 되는 swiper-slide

        spaceBetween: 20, //슬라이드간 마진값

        on: {

          init:this.init,

          sliderMove:this.stopAtoPlay, //methods

          sliderChangeTransitionStart:this.stopAutoPlay, //methods

          transitionEnd:this.startAutoPlay, //methods

          reachBeginning: () => {

            //처음 실행되는 함수

          },

          slideChangeTransitionEnd: function () {

            //마지막 실행되는 함수

          },

        },

      },

 

 

initialSlide : 기본값은 0 이고 첨시작되는 인덱스를 설정한다.

loop : 기본 값은 "false" 이고 "true" 설정하면 루프 모드로 설정할수 있습니다.

direction : 기본 값은 "horizontal" 이고 "vertical" 설정하면 세로로 형으로 모드를 변경할수 있습니다.

effect : 기본 값은 "slide" 이고 "fade", "cube", "overflow"로 변경할수 있습니다.

speed : 기본 값은 "300" 이고 숫자형태로 움직이는 시간을 정의할수 있습니다.

spaceBetween : 기본 값은 0 이고 숫자형태로 item 간격을 정의할수 있습니다.

slidesPerView : 슬라이더 컨테이너에 동시에 표현할수있는 슬라이드 겟수를 숫자 형태로 정의 합니다.

autoplay: {delay: 5000,}, : (1000 = 1초) 로시간을 정의하면 자동으로 슬라이드를 합니다.

pagination: {el: '.swiper-pagination',type: 'bullets',}, : el(태그 선텍자), type ["bullets", "fraction", "progressbar", "custom"]

 

breakpoints:

반응형{ slidesPerView: 1, spaceBetween: 10, breakpointsInverse: true, breakpoints: { 320: { slidesPerView: 2, spaceBetween: 20 }, 640: { slidesPerView: 4, spaceBetween: 20 }, } }

 

realIndex : 진행중인 인덱스 값을 리턴합다.

.previousIndex : 이전 슬라이드 인덱스 번호

.slideTo(index, speed, runCallbacks) : 인덱스 번호로 슬라이드로 실행

.slidePrev(index, speed, runCallbacks) : 이전 슬라이드로 진행합니다.

.slideNext(index, speed, runCallbacks) : 다음 슬라이드로 진행합니다.

.autoplay.stop() : autoplay 모드일때 진행을 정지 합니다.

.autoplay.start() : autoplay 모드일때 진행을 시작 합니다.

.destroy(deleteInstance, cleanupStyles) : Swiper 를초기화 합니다. 기본값(true, false
- deleteInstance : Swiper 인스턴스를 삭제하지 않으려면 false - cleanupStyles : 모든 사용자 정의 스타일이 슬라이드, 래퍼 및 컨테이너에서 제거 하지않으려면 false

 

.update() : Swiper 컨테이너크기, 슬라이더크기, 컨텐츠등을 새로 불러오기.
.updateSize () - 컨테이너의 크기를 다시 계산합니다.

.updateSlides () - 슬라이드 수와 해당 오프셋을 다시 계산합니다. JavaScript를 사용하여 슬라이드를 추가 / 제거한 후에 유용합니다.

.updateProgress () - 스와이퍼 진행률 다시 계산 .updateSlidesClasses () - 슬라이드 및 글 머리 기호에서 활성 / 이전 / 다음 클래스 업데이트

 

 

init: function () { }, : swiper 초기화 후 실행

transitionStart:function(event){}, : 슬라이드 모션이 시작되는 시점에 호출되는 콜백 합수입니다. 인자값으로 현제"Swiper"를 오브젝트로 받아옵니다.

transitionEnd:function(){}, : 슬라이드 모션이 끝나는 시점에 호출되는 콜백 합수입니다. 인자값으로 현제"Swiper"를 오브젝트로 받아옵니다.

touchMove:function(event){} : 손으로 터치 이동할때 콜백 함수 실행

 

 

 

 

 

 

 

 

 

this.swiper.slideTo(3, 1000, false)

this.swiperSlides.push(this.swiperSlides.length + 1)

 

 

.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동

.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동

.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동

.autoplay.start(); // 자동 재생 시작

.autoplay.stop(); // 자동 재생 정지

.destroy() // 슬라이드 제거

 

 

slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수

spaceBetween : 6, // 슬라이드 사이 여백

loop : false, // 슬라이드 반복 여부

loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정 pagination : false, // pager 여부

autoplay : { // 자동 슬라이드 설정 , 비 활성화 시 false delay : 3000, // 시간 설정

disableOnInteraction : false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음 },

navigation: { // 버튼 사용자 지정 nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },

 

 

freeMode : false, // 슬라이드 넘길 때 위치 고정 여부

autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.

a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!

resistance : false, // 슬라이드 터치에 대한 저항 여부 설정

slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동

centeredSlides : true // true시에 슬라이드가 가운데로 배치

allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능

watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정

slidesOffsetBefore : number, // 슬라이드 시작 부분 여백

slidesOffsetAfter : number, // 슬라이드 시작 부분 여백

pagination : { // 페이저 버튼 사용자 설정

el : '.pagination', // 페이저 버튼을 담을 태그 설정

clickable : true, // 버튼 클릭 여부

type : 'bullets', // 버튼 모양 결정 "bullets", "fraction"

 

renderBullet : function (index, className) {

// className이 기본값이 들어가게 필수 설정 return '<a href="#" class="' + className + '">' + (index + 1) + '</a>' },

renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용 return '<span class="' + currentClass + '"></span>' + '<span class="' + totalClass + '"></span>'; } },