Vuejs-Vue glide v1.3.10: vue-glide Glide.jsvue-glide - Vue slider & carousel component on top of the Glide.js

icon
Latest Release: v1.3.10

Fix: NPM vulnerabilities

Source code(tar.gz)
Source code(zip)

Vue Glide

npm bundle size

Vue component on top of the Glide.js

Documentation

https://antonreshetov.github.io/vue-glide

Install

NPM

Installing with npm is recommended and it works seamlessly with webpack.

npm i vue-glide-js

Download

You can download latest version from the Github: Download

Quick Start

Global

To use in your project, just import vue-glide and install into Vue.

import Vue from 'vue'
import App from './App.vue'
import VueGlide from 'vue-glide-js'
import 'vue-glide-js/dist/vue-glide.css'

Vue.use(VueGlide)

new Vue({
  el: '#app',
  render: h => h(App)
})

On demand

<template>
  <div id="app">
    <vue-glide>
      <vue-glide-slide v-for="i in 10" :key="i">
        Slide {{ i }}
      </vue-glide-slide>
    </vue-glide>
  </div>
</template>

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

  export default {
    components: {
      [Glide.name]: Glide,
      [GlideSlide.name]: GlideSlide
    }
  }
</script>

License

MIT © 2018-present Anton Reshetov

Comments

  • disabling
    disabling

    Feb 10, 2021

    Hi. Is there is a way to disable the slider if a condition is met (eg, mobile)?

    Reply
  • end of slides
    end of slides

    Mar 25, 2021

    hello, is there an event that is fired when the glide is at the end of the slides and at the beginning?

    Reply
  • Use the Discussions
    Use the Discussions

    Apr 3, 2021

    From now on, please use Discussions to discuss or ask for help. Only bugs or suggestions should be in the issues.

    Reply
  • Feature/add slot for bullets
    Feature/add slot for bullets

    Apr 4, 2021

    Added slot for bullet and updated docs

    closes #25 #52

    Reply
  • Component inside slide not visible until slide is in focus
    Component inside slide not visible until slide is in focus

    May 12, 2021

    I am working in a NuxtJS project and we are implementing GlideJS. The problem we are having now is that sometimes one of the slides only displays the HTML portion of the slide and not the component that was included. When we go forth or back until the specific slide comes into view then it will load the component succesfully. Obviously this is a flaw and we should fix it.

    Does anyone have any experience with this same issue, and if so, did you manage to find a solution?

    Our current code:

    <template>
      <div>
        <vue-glide
          v-if="entries.length > 0"
          ref="slider"
          type="carousel"
          class="max-w-full mb-6 md:mb-12"
          :per-view="perView"
          :breakpoints="breakpoints"
        >
          <vue-glide-slide v-for="(entry, index) in entries" :key="index">
            <div class="rounded-xl bg-app-green-200 overflow-hidden">
              <MoleculePicture image="entry.images">
    
              <div class="border-b-2 border-app-yellow block"></div>
              <div class="py-5 px-6">
                Some HTML here (working fine)
              </div>
            </div>
          </vue-glide-slide>
          <template v-if="entries" slot="control">
            <div class="float-left cursor-pointer border-box w-2/5 mt-4" data-glide-dir="<">
              <AtomIconArrowLeft class="w-4 float-left md:float-right" />
            </div>
            <div class="inline-block text-center border-box w-1/5 mt-4 font-bold">{{ currentSlide + 1 }}/{{ entries.length }}</div>
            <div class="float-right cursor-pointer border-box w-2/5 mt-4" data-glide-dir=">">
              <AtomIconArrowRight class="w-4 float-right md:float-left" />
            </div>
          </template>
        </vue-glide>
      </div>
    </template>
    

    As you can see we use a (in this example, we tried multiple components and they all fail) component inside our slide called MoleculePicture.

    It appears to show fine for all slides except for the "cloned" slides and I am unable to solve it.

    Reply
  • bullets slot or prop
    bullets slot or prop

    Jun 21, 2021

    hello i'm trying to add the bullets to my carousel, but nothing shows, i added :bullet="true" prop and inspecting the html there are the bullets, but nothing shows, any suggestions?

    here is the html:

    <vue-glide class=""
                     type="slider"
                     :rewind="true"
                     :rewind-duration="0"
                     :bound="false"
                     :autoplay="5000"
                     :animation-duration="3000"
                     :gap="10"
                     :per-view="1"
                     :bullet="true"
          >
            <vue-glide-slide v-for="(item,index) in items"
                             :key="index"
                             class="block relative py-16 w-full justify-center px-10"
            >
              <div class="w-full grid grid-cols-12">
                <div class="rounded-xl col-span-5">
                  <div class="relative">
                    <div class="pt-3">
                      <img
                          :src="item.image"
                          :alt="item.title"
                          class="object-cover h-77 rounded-xl z-10"
                      >
                    </div>
                  </div>
                </div>
                <div class="col-span-7 flex flex-col justify-between">
                  <div class="text-left font-semibold text-3xl line-clamp-2">
                    {{ item.title }}
                  </div>
                  <div class="text-left font-normal text-lg line-clamp-3">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer took a
                    galley of type
                  </div>
                </div>
              </div>
            </vue-glide-slide>
          </vue-glide>
    

    inside the html i have:

    <div data-glide-el="controls[nav]" class="glide__bullets h-20">
    <button data-glide-dir="=0" class="glide__bullet"></button>
    <button data-glide-dir="=1" class="glide__bullet"></button>
    <button data-glide-dir="=2" class="glide__bullet glide__bullet--active">
    </button><button data-glide-dir="=3" class="glide__bullet"></button>
    <button data-glide-dir="=4" class="glide__bullet"></button>
    <button data-glide-dir="=5" class="glide__bullet"></button>
    <button data-glide-dir="=6" class="glide__bullet"></button></div>
    

    and the glide works, i can see the glide__bullet glide__bullet--active class switch between the bullets, i think is some css issue

    the slide section is ok, just the bullets didn't show thanks for your help

    Reply
  • Restore index payload for event glide:slide-click
    Restore index payload for event glide:slide-click

    Apr 24, 2019

                                                                                                                                                                                                           
    Reply
  • Memory Leak issues
    Memory Leak issues

    Dec 6, 2019

    Hi guys, according to this blog post https://vuejs.org/v2/cookbook/avoiding-memory-leaks.html, it looks like "glide" instance is not properly destroyed on component destroy. I guess the simple solution is to add this :

    beforeDestroy() {
       if (this.glide) this.glide.destroy()
    }
    

    Do you want a PR for that ?

    Reply
  • How to use the API?
    How to use the API?

    Jan 24, 2019

    Its possible to use the API to change properties?

    Reply
  • Can't import module
    Can't import module

    Jan 3, 2019

    Since I updated to 1.3.0 I cannot import the module using:

    import { Glide, GlideSlide } from 'vue-glide-js' (same for css files)

    The folder structure in node_modules looks like this: ##image

    Reply
  • Listening on the index of current  active slide
    Listening on the index of current active slide

    Dec 18, 2018

    Hi, I've read the documents, and still don't know how to use events. Could you give an example about how to listen on the index of current active slide?

    Reply
  • Dynamically add slides in the middle of a glide produce strange result
    Dynamically add slides in the middle of a glide produce strange result

    Jan 4, 2019

    If I have a glide like this (where slides is an array of 3 elements):

    <vue-glide>
        <vue-glide-slide v-for="(slide, i) of slides" :key="i">
            Heyy, I am slide { i }
        </vue-glide-slide>
    </vue-glide>
    

    In the rendered HTML, each slide (.glide__slide) has a data-glide-index attribute. I this case, each data-glide-index is respectively 0, 1 and 2.

    but now, if I create a button who adds an element in the middle of my list (for example between index 1 and 2), the data-glide-index of each slide will be respectively 0, 1, 3, 2.

    By the way, the display will be broken and I will not be able to focus the new slide.

    Reply