[Vue3] 스와이프 와 캐러셀의 차이점, 캐러셀 구현 방법

 

1. 상호작용 방식 :
   스와이프: 사용자가 화면을 손가락으로 밀어서 콘텐츠를 넘기는 방식입니다.
   캐러셀: 자동으로 회전하거나 버튼을 눌러 콘텐츠를 전환하는 방식입니다.
2. 동작 : 
   스와이프: 주로 터치 기반 디바이스에서 사용되며, 사용자의 직접적인 조작이 필요합니다.
   캐러셀: 자동 회전 기능이 있어 사용자 개입 없이도 콘텐츠가 변경될 수 있습니다.
   
   
3. 사용 목적:
   스와이프: 모바일 앱이나 반응형 웹사이트에서 많이 사용됩니다.
   캐러셀: 웹사이트의 메인 페이지나 제품 갤러리 등에서 자주 사용됩니다.
   
   

   4. 구현 방식: 
       스와이프: 주로 터치 이벤트를 감지하여 구현합니다.
       캐러셀: CSS 애니메이션이나 JavaScript를 사용하여 구현하며, 자동 회전 기능이 포함될 수 있습니다


캐러셀의 구현 방법

A의 url이면 B,C,D  url 화면이 순서대로 보이게 하고
각각의 url 로도 해당 화면이 접근되게 해야하는 요구사항이었다.

Component.vue 를 부모 페이지로 정하고
보이게 하고 싶은 컴포넌트들을 동적으로 이어주면 된다

<!-- Component.vue -->

<template>
    <carousel
        :autoplayTimeout="5000"
        :items="1"
        :dots="false"
        :nav="false"
        :loop="true"
        >
        <component is="ComponentA"
            :param1="param1"
            :param2="param2" />
        <component is="ComponentB" 
            :refin="param1"
            :sorce="param2" />
        <component is="ComponentC" 
            :refin="param1"
            :sorce="param2" />
    </carousel>
</template>

<script>
import carousel from 'vue-owl-carousel'

import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

export default {
    components: {
        carousel,
        ComponentA,
        ComponentB,
        ComponentC
    },
    data() {
        return {
            param1: '',
            sorce: ''
        }
    },
    created() {
        const urlParams = new URLSearchParams(window.location.search);
        this.param1 = urlParams.get('param1');
        this.param2 = urlParams.get('param2');
    }
}
</script>

 

 

 

 

 

 

해당 케이스에서는 쿼리스트링을 자식 컴포넌트들에게 넘겨주고,

이후 로직을 진행시켜야해서 쿼리스트링도 함께 넘겨줬다

 

// routes.js

import Component from '@/components/Pages/Component';
import ComponentA from '@/components/Pages/ComponentA';
import ComponentB from '@/components/Pages/ComponentB';
import ComponentC from '@/components/Pages/ComponentC';

const routes = [
{ name: "Component", path: "/reservation", component: Component, meta: { name: "메인 페이지" }, props: true, props: (route) => ({ refin: route.query.param1, sorce: route.query.param2 }) },
{ name: "ComponentA", path: "/reservationA", component: ComponentA, meta: { name: "로딩화면A" }, props: true, props: (route) => ({ refin: route.query.param1, sorce: route.query.param2 }) },
{ name: "ComponentB", path: "/reservationB", component: ComponentB, meta: { name: "로딩화면B" }, props: true, props: (route) => ({ refin: route.query.param1, sorce: route.query.param2 }) },
{ name: "ComponentC", path: "/reservationC", component: ComponentC, meta: { name: "로딩화면C" }, props: true, props: (route) => ({ refin: route.query.param1, sorce: route.query.param2 }) }
]

export { routes };

vue3 carousel
https://ismail9k.github.io/vue3-carousel/

Vue3-carousel | Vue3-carousel

https://www.npmjs.com/package/vue-owl-carousel

vue-owl-carousel