antonreshetov/vue-glide

A slider and carousel as vue component on top of the Glide.js

Vue Glide

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

vue-glide's Issues

end of slides

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

How to colaborate

I'm trying to clone to a linux ubuntu 20.04 laptop, but npm gives me this:

[Glide warn]: Root element must be a existing Html node

i'm using vue-glide-js and have a get this error on one of my pages when route change. for example when i hit that page on url or refresh that page, everything is fine! but when go to that page via nuxt-link (router-link) i get [Glide warn]: Root element must be a existing Html node and selectorQuery of null .

<template>
    <div class="full_width mb-5">
        <div :style="sliderW">
            <v-skeleton-loader v-if="compSkeleton" type="image" class="skel" />
            <vue-glide class="slider-glide" v-bind="carouselOptions" ref="slider" @glide:mount-after="mm()" :key="key" :style="sliderVisibility">
                <vue-glide-slide style="position:relative; min-height: 20px;" v-for="(item,index) in items" :key="item+index">
                    <div class="slide_wrapper">
                        <a :href="slideLink(item.link)">
                            <img :src="item.imgLg" class="img-responsive slide_img" :alt="slideTitle(item.title)">
                        </a>
                    </div>
                </vue-glide-slide>
            </vue-glide>
        </div>
    </div>
</template>
<style>
.skel{
    height: 100%;
    position: absolute;
    width: 100%;
    background: #ffffff;
    z-index: 1;
    border-radius: 0px !important;
}
.v-skeleton-loader__image{
    height: 100%;
}
</style>
<script>
import skeletonhomeslider from "~/components/global/skeletons/skeletonhomeslider"
export default {
    props:['options'],
    components:{
        'skeletonhomeslider': skeletonhomeslider
    },
    data(){
        return{
            items: [],
            compSkeleton: true,
            imgSkeleton: true,
            key: 1,
            sliderVisibility: 'visibility:hidden;'
        }
    },
    computed:{
        skeletonHeight(){
            return this.$vuetify.breakpoint.width/3
        },
        sliderW(){
            return `width:100%;position:relative;min-height:${this.$vuetify.breakpoint.width/3}px;`
        },
        carouselOptions(){
            return{
                direction: this.lang.dir || process.env.SITE_DIRECTION,
                type: 'carousel',
                autoplay: 3000,
                hoverpause: true,
                bound: false,
                rewind: true,
                perView: 1,
                peek: { before: 0, after: 0 },
                bullet: true,
                gap: 0
            }
        },
    },
    methods:{
        mm(){
            setTimeout(() => {
                this.compSkeleton = false
                this.sliderVisibility = '';
            }, 1000);
        },
        slideLink(link){
            if(link && link !== 'null'){
                return link
            }
            return '#'
        },
        slideTitle(title){
            if(title && title !== 'null'){
                return title
            }
            return process.env.SITE_TITLE
        },
        imgLoaded(){
            this.imgSkeleton = false
        }
    },
    async fetch(){
        let res = await this.axiosFetch(`homelist/list/${this.options.item.id}/0/1`)
        if(this.resOk(res.status)){
            this.items = res.data
        }
    },
    created(){
        this.compSkeleton = true
    },
    mounted(){
        setTimeout(() => {
            // this.compSkeleton = false
        }, 1000);
    }
}
</script>

and one more thing. the code is for my slider component which i have two of it! one for desktop and one for mobile that i import base on device. the mobile one has class slide-glide-m on <vue-glide>

Prevent ul 'glide__slides' element from resizing on window resize

I have a container in a fixed position that contains a vue-glide component, I then have a container which overlays and scrolls above that component that also includes a vue-glide component.

Upon window resize, the vue glide component in the fixed container continuously gets larger, even when the window gets smaller.

The vue glide component in the non-fixed container does not do this.

I dont expect my users to increase screen size mid-use, is there a way to disable resizing of the vue glide component upon window resize to prevent this?

How to use the API?

Its possible to use the API to change properties?

API not working outside an @click action

Hy,
this.$refs.slider.glide.pause(); seems working only on click action. I've tried to use it in method function, for exemple :
if (this.active >= 4) {
console.log('PAUSE')
this.$refs.slider.glide.pause();
}
It does nothing without errors, except the console log.
Our glide is configured with autoplay.
Is there another calling API functions ?
Could you help ? Thanks

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

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.

Distribute compiled components

We are in an environment still relying on browserify and I did not manage to get the this dependency to be compiled correctly. Any chance the compiled components could be added to the npm package?

Next/Previous Arrow Control

JUST IN CASE anyone is about to spent too much time looking (like I did) for support for the previous and next arrows, look no further than the Workbench.vue file in the vue-glide-js folder. Inside your vue-glide component just paste that bad boy in there and you got your buttons.

<vue-glide>
   <vue-glide-slide>
      content here
   </vue-glide-slide>
   <template slot="control">
      <button data-glide-dir="<">prev</button>
      <button data-glide-dir=">">next</button>
   </template>
</vue-glide

Can't import module

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:
##

event is not defined

hello,

I have an error when I click on one item. event is not defined

I look in your repo and I found the mistake in your src/components/Glide.vue l:268 you probably rename event in e but you forgot one ;)

carousel increasing width of entire page

First of all, thanks for the work on this incredibly elegant library!

I'm trying to implement a carousel using vue-glide on my web app and I keep facing an issue where all the slides are visible at the same time on the page and the page has become horizontally scrollable to accommodate all the slides.

Is this expected behaviour? Here's a reproduction of the issue I'm facing:

Preview: https://wo196786y5.codesandbox.io/
Code: https://codesandbox.io/s/wo196786y5?fontsize=14

Example with on demand import don't work

Hi,
I use code from example

<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 VueGlide from 'vue-glide-js/src/components/Glide.vue'
import VueGlideSlide from 'vue-glide-js/src/components/GlideSlide.vue'

export default {
  components: {
    [VueGlide.name]: VueGlide,
    [VueGlideSlide.name]: VueGlideSlide
  }
}
</script>

And i see this

If i do global import, everything is ok

Browser info:

• Chrome 75.0.3770.142
• Opera 62.0.3331.72

perTouch not working

I have test it with a slider of 20 slides (elements), setting perTouch: 5 so I only need three clicks to reach the last slide, did'nt work.

npm audit found 291 vulnerabilities

NPM found 291 vulnerabilities in the package.

IE11 swiping never stops

Hi,
when using IE11, when you swipe using mouse, it never stops.

It seems to be similar to issue, that glide had months ago. It seems to work with their latest version, which you seem to use as well. issue

Do you have any idea, what might cause that?

Steps to reproduce:

1. Open https://antonreshetov.github.io/vue-glide/ in IE11
2. Swipe to any direction, using mouse
3. It should be stuck in swiping action

Peek prop doesn't render propely.

Hello there,

The peek property doesn't render before and next viewport's sizes properly unless a browser resize is involved.

Here's my settings:

<vue-glide :perView = 4 :peek = 40 :rewind = false :bound = true :breakpoints = "{ 992 : { perView: 2 }, 768 : { perView: 1 } }" >

See attached screenshot:

Tested on recent desktop's Edge and Chrome.

Thanks for support.

Update glide to v3.3.0

please add your documentation site bullet props

lazy load support?

Does this Vue component support lazy loading tiles?

Listening on the index of current active slide

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?

startAt does not work

Hello again,

It seems that the 'startAt' doesnt seems to work. Neither in options or as a prop.

https://codesandbox.io/s/10v3zv5jr4

Destroy vue-glide instance on desktop

I was trying to implement the slider only on mobile and destroy the instance on the desktop. Like unslick in slick slider, I know there are breakpoints included in vue-glide but it would be nice to have the feature to disable the slider or destroy the vue-glide classes on desktop.

Please Make This work for Vue 3

Can't get @glide:mount-after to work

Hello,

I'm trying to use the mount-after event but it doesn't seem to fire. I'm not sure what I'm missing. Thank you!

https://codesandbox.io/s/86ok92oy9

<vue-glide
  class="demo"
  ref="slider"
  v-model="active"
  type="carousel"
  @glide:slide-click="test"
  @gilde:mount-after="testMount"
>

methods: {
  test(index) {
    alert(`click ${index}`);
  },
  testMount() {
    alert("mounted");
  }
}

Exclude polyfills from build

Hi,
could you exclude the polyfills from the build, It is recommended in official vue docs.
It could reduce the size by quite a bit.

Event glide:slide-click not triggering on cloned carousel slides

The event glide:slide-click does not trigger on cloned carousel slides (those that have the css class glide__slide-clone).

Example: https://codesandbox.io/s/vue-template-xbffg

This appears to be an issue since 1.3.7.
Specifically I think it might have been this commit that caused the issue.

Slides added after carousel is initialized cant be shown, altough rendered in html.

Slides added after initalization cant be navigated to.
The slide is in the html, but the slider only loops through the initial slides.
I assume i would need to also update the number of slides somehow?

<vue-glide-slide v-for="(slide, i) in slides" :key="i">{{slide}}</vue-glide-slide>
<button v-on:click="addCard()">Add Card</button>

...
addSlide(){
this.slides.push('Another Slide')
}

Slider inside slider controls

I have slider and inside it I have another nested slider.
But controls from nested slider affect main slider.
They should be somehow scoped.

Use the Discussions

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

events & callback

Hi, i'm new on all of these so i need help. first of all how this events work to begin with. you just listed them without use examples.
And second and more important, i wanna send an axios request at the end of my carousel and load more items. i couldn't work with events so used active slide and watched it and on last slide sent and updated my data but slide still shows the previous one. what should i do?

Event Handlers in carousel clone slides do not work

Hello again,

When we have carousel, it creates node clones of slides and put them to the edges. But sadly it does not seem to copy the event handlers. In my use case the @click handler does not work.

Is there any way to get it to work?

IE11 error on forEach

IE11 doesn't support forEach() on NodeList (which is array-like and not an array), which happens on document.querySelectorAll()

see babel/babel#6511

auto-fit slide number feature

Did you plan to have an auto-fit slide number depending on slide content size fixed ?
I mean I would like to keep my slide size and that the number shown is not considered, but it show all can be shown from available size.
Thanks

Controls[nav] addition

Can you update the controls render in Glide.js from:
control = <div data-glide-el="controls">{this.$slots.control}</div> to:
control = <div data-glide-el="controls[nav]">{this.$slots.control}</div>

This would allow for an active class to be added to the controls with a slider is either at the beginning or end.

breakpoints perview

Hello, i'm trying to set the breakpoints perview number of slides, sorry, but i can't understand how it works.
if i set

     breakpoints: {
                    600: {
                        perView: 2
                    }, 
                   800: {
                        perView: 3
                    },
                    1500:{
                        perView: 4
                    }
                }

i expect to have 2 slides from 0 to 600 and from 600 to 800, 3 from 801 to 1500, and 4 after 1501.

now i have a random number of slides:
2 from 0 to 660
3 from 661 to 880
4 from 881 to 1650
3 after 1651

how can i fix this? are there any "internal" breakpoints?

thank you

Can't get it to work with quasar js framework

Hello, i just installed this package via npm and imported everything.

But it's just showing everything next to each other without bigger style.

EDIT:
I just found out, that the elements are actually moveable etc, but now i got a new problem. When im using a v-for loop with objects, its getting rendered wrong. Sometimes an image is not equal height to the others and sometimes i get an 'Cannot read property 'filter' of undefined"' error.

v-model/v-for does not work with dynamic components

Hi, I want to use this slider where the slide content is another component. I tried passing it this way and it does render what's inside the child component, but the slider doesn't work and throws TypeError: "this.$slots.default is undefined"
Here's my code:
<vue-glide> <vue-glide-slide v-for="char in chars" :key="char.id"> <component :is="child_component" v-bind:key="char.id" v-bind:char="char" v-bind:activeChar="activeChar" ></component> </vue-glide-slide> </vue-glide>

disabling

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

bullets slot or prop

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

Memory Leak issues

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 ?

Slot for navigation (bullets)

Docs need to be improved, inspecting the component with devtools shows a "bullet" prop for VueGlide, but docs says nothing about this prop.

A slot for bullet navigation needs to be added.

bullet by slide and breakpoints

Currently bullets are based solely on the number of slides. But if we use slide and breackpoints the bullet should take into consideration the two parameters.

Exemple :
`<vue-glide
type="slider"
:breakpoints="{
600: { perView: 1 },
},"
:rewind="false"
:gap="10"
:bullet="true"
:per-view="2"

`

With this example, logically, the number of bullet should be two, not three.

Control Slot Styling

Is there a way to add a class to the controls slot (or even a div inside around the buttons) to help with styling and positioning the Slider Controls?

Default control slot:

<template slot="control">
   <button data-glide-dir="<">prev</button>
   <button data-glide-dir=">">next</button>
</template>

Rendered in the browser:

<div data-glide-el="controls">
   <button data-v-4483513f="" data-glide-dir="<">prev</button>
   <button data-v-4483513f="" data-glide-dir=">">next</button>
</div>

How can I do this?

<div class="slider__nav" data-glide-el="controls">
   <div class="slider__buttons">
      <button data-v-4483513f="" data-glide-dir="<">prev</button>
      <button data-v-4483513f="" data-glide-dir=">">next</button>
   </div>
</div>

Component inside slide not visible until slide is in focus

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.

event glide:slide-click payload undefined

Since #22, the payload index of the slide-click event is undefined

Please remove vue package

I can't use it with nuxtjs now because my project is using nuxt1.x. That means I'm using vue 2.5.x, but your component file was built on top of vue ^2.5.16. So every time I install your package, vue will be automatically install at 2.6.6 (newest version). That crashed my vue-server-renderer of nuxtjs1.x.
I tried many ways to override your vue version but nothing work, I have to download your components and run it locally.

Cannot read property 'querySelector' of undefined

Hello,
I have installed this plugin on Nuxt project run in spa mode.
I have the error : Cannot read property 'querySelector' of undefined
Here is my sample after importing glide as global.
<vue-glide> <vue-glide-slide v-for="company in companyList" :key="company.id" xl="4" md="4" class="mb-3"> <mdb-view> <img :src="company.logo" class="img-fluid z-depth-1" alt="placeholder"> <mdb-mask flex-center overlay="teal-strong" :text="company.companyName" /> </mdb-view> </vue-glide-slide> </vue-glide>
any help please.

demo site has issue on initial load

On initial load, clicking prev and next button would result in

Uncaught TypeError: Cannot read property 'classList' of undefined at Object.activeClass (2.980bc37f.js:6)

The error goes away if first click on page dots

Hadle clicks on 2 glides' slides differently

I have 2 glides and I want to only handle the clicks on one glide but not the other! right now handling the event @glide:slide-click handles both glides. shouldn't the event be launched only from the glide?