Vue.js Vuetify Swipe Gesture List Cards Slider Using Swiper Library in Javascript Full Project For Beginners

You are currently viewing Vue.js Vuetify Swipe Gesture List Cards Slider Using Swiper Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments


Welcome folks today in this blog post we will be building a swipe gesture list cards slider in vue.js vuetify using swiper library in javascript. All the full source code of the application is given below.



Get Started



In order to get started you need to install the below library using the npm command as shown below


npm i swiper



For all the images and javascript files you can download the full github repository as shown below




After downloading it the directory structure will look something like this



Built With


Name Description
swiper ️Most Modern Mobile Touch Slider 👆
vue Progressive JavaScript Framework 🖖
vue-cli-3 ️Standard Tooling for Vue.js Development 🛠️
vuetify ️Material Component Framework for Vue.js 📚

Development Dependencies

Name Description
stylus-loader CSS preprocessor for webpack 🎨
vue/cli-plugin-babel Compiler for next generation JavaScript 🐠
vue/cli-plugin-eslint Pluggable JavaScript linter ✍️
vue/cli-plugin-pwa JavaScript Library for adding support to PWA


Add v-list component

<!-- App.vue -->
    <template v-for="(item, index) in items">

import CustomComponent from '@/components/CustomComponent.vue'
export  default {
  components: {
    'custom-component': CustomComponent
  methods: {
    transitionEnd () {
      // Callback from SwipeoutItem after transition



Import and configure Swiper in the custom component

<!-- CustomComponent.vue -->
  <div :id="id" class="swiper-container">
    <div class="swiper-wrapper">
      <v-list-tile class="swiper-slide error"></v-list-tile>
      <v-list-tile class="swiper-slide">
        <!-- custom content here -->

import 'swiper/dist/css/swiper.min.css'
import { Swiper } from 'swiper/dist/js/swiper.esm.js'

export default {
  props: ['id'],
  mounted () {
    const self = this
    const el = '#' +

    // Initialize Swiper
    const swiper = new Swiper(el, {
      initialSlide: 1,
      resistanceRatio: 0,
      speed: 150

    // Event will be fired after transition
    swiper.on('transitionEnd', function () {
      if (this.activeIndex === 0) {
        // Destroy slider instance and detach all events listeners



Project Installation & Setup


Clone repository

git clone
cd vuetify-swipeout

Install dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint




Live Demo



Vue.js Vuetify Swiper Slider


Leave a Reply