Vue Glide.js Carousel Component

1.3.14 · active · verified Sun Apr 19

Vue Glide.js is a Vue.js component that wraps the popular and lightweight Glide.js carousel library, providing a Vue-native interface for creating responsive sliders. As of its current stable version, 1.3.14, the library facilitates the integration of carousels into Vue applications with minimal setup. It maintains a consistent, albeit not rapid, release cadence, addressing NPM vulnerabilities and updating the underlying Glide.js library. Its key differentiators include leveraging the robust feature set and performance of Glide.js while offering a declarative API consistent with Vue's component-based architecture, abstracting away direct DOM manipulation typical of vanilla JavaScript libraries. The current documentation and examples primarily target Vue 2 environments.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates the on-demand registration and usage of `vue-glide-js` components (`Glide` and `GlideSlide`) within a Vue 2 application's Single File Components, including dynamic content and navigation controls.

/* main.js (or main.ts) */
import Vue from 'vue';
import App from './App.vue';
import 'vue-glide-js/dist/vue-glide.css';

new Vue({
  render: h => h(App),
}).$mount('#app');

/* App.vue */
<template>
  <div id="app">
    <h1>My Product Showcase</h1>
    <div class="carousel-container">
      <Glide :options="glideOptions">
        <GlideSlide v-for="product in products" :key="product.id">
          <div class="product-card">
            <img :src="product.image" :alt="product.name" />
            <h2>{{ product.name }}</h2>
            <p>{{ product.description }}</p>
          </div>
        </GlideSlide>
        <template slot="control">
          <button data-glide-dir="<">prev</button>
          <button data-glide-dir=">">next</button>
        </template>
      </Glide>
    </div>
  </div>
</template>

<script>
import { Glide, GlideSlide } from 'vue-glide-js';

export default {
  name: 'App',
  components: {
    [Glide.name]: Glide,
    [GlideSlide.name]: GlideSlide
  },
  data() {
    return {
      glideOptions: {
        type: 'carousel',
        perView: 3,
        focusAt: 'center',
        gap: 20,
        breakpoints: {
          768: { perView: 2 },
          480: { perView: 1 }
        }
      },
      products: [
        { id: 1, name: 'Product A', description: 'Description for A', image: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=Product+A' },
        { id: 2, name: 'Product B', description: 'Description for B', image: 'https://via.placeholder.com/150/00FF00/000000?text=Product+B' },
        { id: 3, name: 'Product C', description: 'Description for C', image: 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Product+C' },
        { id: 4, name: 'Product D', description: 'Description for D', image: 'https://via.placeholder.com/150/FFFF00/000000?text=Product+D' },
        { id: 5, name: 'Product E', description: 'Description for E', image: 'https://via.placeholder.com/150/FF00FF/FFFFFF?text=Product+E' }
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.carousel-container {
  max-width: 900px;
  margin: 0 auto;
}
.product-card {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1em;
}
button:hover {
  background-color: #368a62;
}
</style>

view raw JSON →