antonreshetov / vue-glide Goto Github PK
View Code? Open in Web Editor NEWA slider and carousel as vue component on top of the Glide.js
Home Page: https://antonreshetov.github.io/vue-glide/
License: MIT License
A slider and carousel as vue component on top of the Glide.js
Home Page: https://antonreshetov.github.io/vue-glide/
License: MIT License
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
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.
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.
Its possible to use the API to change properties?
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.
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.
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 ;)
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>
Hi. Is there is a way to disable the slider if a condition is met (eg, mobile)?
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.
From now on, please use Discussions to discuss or ask for help. Only bugs or suggestions should be in the issues.
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.
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?
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.
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.
IE11 doesn't support forEach() on NodeList (which is array-like and not an array), which happens on document.querySelectorAll()
see babel/babel#6511
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
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?
Does this Vue component support lazy loading tiles?
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')
}
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.
Hello again,
It seems that the 'startAt' doesnt seems to work. Neither in options or as a prop.
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.
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.
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?
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?
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
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>
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:
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?
Since #22, the payload index of the slide-click event is undefined
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.
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
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
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?
I have slider and inside it I have another nested slider.
But controls from nested slider affect main slider.
They should be somehow scoped.
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:
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 ?
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>
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");
}
}
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
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.
hello, is there an event that is fired when the glide is at the end of the slides and at the beginning?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.