[ Vue ] Vue3 이미지 슬라이더

Carousel 사이트 바로가기

 

Vue3 이미지 슬라이드 플러그인

 

vue3-carousel 설치

npm install vue3-carousel

 

HTML

<div class="image_slider" slideWidth="100%">
  <carousel :items-to-show="1" :wrapAround="true" :autoplay="5000">
    <slide v-for="slide in items[0].menus" :key="slide">
      <div class="carousel__item">
        <figure>
          <img :src="slide.image" :alt="slide.alt" />
          <figcaption><em>{{slide.caption}}</em><span>{{slide.description}}</span></figcaption>
        </figure>
      </div>
    </slide>

    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</div>

Script

<script>
    import 'vue3-carousel/dist/carousel.css'
    import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
    
    export default {
        components: {
            Carousel,
            Slide,
            Pagination,
            Navigation
        },
        data() {
            items: [
                {
                  title: 'Carousel Slider',
                  description: 'Carousel를 이용한 이미지 슬라이드 효과',
                  menus: [
                    {
                      image: require('../assets/images/slider01.jpg'),
                      alt: 'image1',
                      caption: 'Responsive Site',
                      description: '슬라이드 플러그인을 이용한 반응형 이미지 슬라이드'
                    },
                    {
                      image: require('../assets/images/slider02.jpg'),
                      alt: 'image1',
                      caption: 'Responsive Site',
                      description: '슬라이드 플러그인을 이용한 반응형 이미지 슬라이드'
                    },
                    {
                      image: require('../assets/images/slider03.jpg'),
                      alt: 'image1',
                      caption: 'Responsive Site',
                      description: '슬라이드 플러그인을 이용한 반응형 이미지 슬라이드'
                    }
                  ]
                }
            ]
        }
    }
</script>

이미지 슬라이더

이후 간단한 CSS조작만 해주면 간단하게 이용할 수 있다.

 

 

Available Props

Prop	Default	Description
itemsToShow	1	페이지당 표시할 항목 수
itemsToScroll	1	스크롤할 슬라이드 수
wrapAround	false	무한 스크롤모드
snapAlign	'center'	위치 정렬 'start', 'end' 'center'
transition	300	슬라이드 전환 시간(ms)
autoplay	0	자동 재생 시간(ms)
settings		모든 설정 전달
breakpoints	null	중단점 설정
modelValue	0	초기 슬라이드의 인덱스 번호
mouseDrag	true	마우스 드래그
touchDrag	true	포인터 터치 드래그
pauseAutoplayOnHover	true	마우스오버시 일시정지 여부
dir	ltr	스크롤 방향 'ltr', 'rtl'