vue3 swiper 자동스크롤 사용법

설치

 npm i swiper

 

사용법 (기본예제)

<template>
  <swiper
    :slides-per-view="1" // 한번에 보여질 개수
    :space-between="50" // 컨텐츠마다 간격
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide> //컨텐츠 내용
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

 

 

사용법 (응용)

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>

 

 

세로 슬라이드 사용을 하려는데 height 값이 너무 크게 나오는 문제가 있었다. 

세로 슬라이드 사용시에는 height값을 주어야 한다. 다음과 같이 2군데에 주었다.

  <div class="swiper-container">
      <swiper
        direction="vertical"
        height="40" 			//세로 값
        :slides-per-view="1"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="item in notice" :key="item.id">
          <div class="ar-bg-primary-2 notice-header"
               :style="off ? { display: 'none' } : {}">
            <div class="flex items-center">
              <div class="notice-header-icon">
                <ar-icon name="megaphone" size="28"/>
              </div>
              <p>공지합니다.</p>
            </div>

            <div>
              <span :key="item.index" class="fade">{{ item.title }}</span>
            </div>

            <div class="close" @click="closed">
              <ar-icon name="close" size="16"/>
            </div>
          </div>
        </swiper-slide>
      </swiper>
  </div>
  
  
  <style>
  .swiper-container{
  	height: 40px // 세로 값
  }
  </style>

 

 

 

 

공식 문서

 

https://swiperjs.com/vue

Swiper - The Most Modern Mobile Touch Slider

https://swiperjs.com/demos

Swiper Demos