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

 

DOWNLOAD SOURCE CODE

 

After downloading it the directory structure will look something like this

 

 

Built With

Dependencies

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-list>
    <template v-for="(item, index) in items">
      <custom-component
        :id="`item-${item}`"
        @transitionEnd="customFunction"
        ...
      />
      <v-divider...></v-divider>
    </template>
  </v-list>
  ...
</template>

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

 

 

Import and configure Swiper in the custom component

<!-- CustomComponent.vue -->
<template>
  <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 -->
      </v-list-tile>
    </div>
  </div>
</template>

<script>
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 = '#' + this.id

    // 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) {
        self.$emit('transitionEnd')
        // Destroy slider instance and detach all events listeners
        this.destroy()
      }
    })
  }
}
</script>

 

 

Project Installation & Setup

 

Clone repository

git clone https://github.com/davidgaroro/vuetify-swipeout.git
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