Vue Flippable Card Carousel

View Demo

---

Web	Mobile

About The Project

This project is a documentation of the study to develop the Carousel style visual interaction.

Built With

• Vue
• TypeScript
• Tailwind CSS
• SCSS
• Vue2 Touch Event
• Fontawesome
• Yarn

Getting Started

Prerequisites

• Before you start, install Yarn package to global.

  npm install --global yarn

• Docker install required

  https://www.docker.com/get-started

Installation

Local

1. Clone the repo

   git clone https://github.com/VannsKang/Vue-Flippable-Card-Carousel.git

2. Install NPM packages

   yarn install

3. Run the project

   yarn serve

4. Build the package

   yarn build

Docker

1. Run the Docker inside ./docker folder

   docker-compose up

Introduction

1. There are App and child component FlippableCard

2. You can control the Flippable Card Carousel in various way

   • Rotate the card:

     • Click or Tap(Mobile) the arrow icons
     • Click or Tap(Mobile) the next or previous card face
     • Use key ArrowRgiht and ArrowLeft
     • Slide left or right on the carousel area (Mobile)

• Flip the card:

  • Mouse over the center card
  • Use key ArrowUp and ArrowDown
  • Tap the center card & tap outside the center card (Mobile)

Project Tree

.
├── public
├── src/
│   ├── assets
│   ├── components/
│   │   ├── index.ts
│   │   └── FlippableCard.vue
│   ├── styles/
│   │   ├── mixin.scss
│   │   └── index.css
│   ├── typings/
│   │   └── index.ts
│   ├── App.vue
│   ├── custom.d.ts
│   ├── main.ts
│   └── ...
├── tailwind.config.js
├── tsconfig.json
├── package.json
├── vue.config.js
└── ...

NPM Packages

packages

dependencies:
core-js 3.21.1
vue 2.6.14
vue2-touch-events 3.2.2

devDependencies:
@fortawesome/fontawesome-svg-core 1.3.0
@fortawesome/free-regular-svg-icons 6.0.0
@fortawesome/free-solid-svg-icons 6.0.0
@fortawesome/vue-fontawesome 2.0.6
@typescript-eslint/eslint-plugin 5.15.0
@typescript-eslint/parser 5.15.0
@vue/cli-plugin-babel 5.0.1
@vue/cli-plugin-eslint 5.0.1
@vue/cli-plugin-typescript 5.0.1
@vue/cli-service 5.0.1
@vue/eslint-config-typescript 9.1.0
autoprefixer 10.4.2
eslint 7.32.0
eslint-plugin-vue 8.5.0
postcss 8.4.8
sass 1.49.9
sass-loader 12.6.0
tailwindcss 3.0.23
typescript 4.5.5
vue-template-compiler 2.6.14

ETC

This project is optimized & tested in Chrome.

---

Developed by SOOM

Soomlog.tech