Questions tagged [glidejs]

Glide.js is a dependency-free and extendable JavaScript ES6 slider and carousel.

Introduction

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast.

Advantages

  • Dependency-free - Everything on board, ready for action. Written in vanilla JavaScript without hidden dependencies.
  • Modular - Need a few selected modules? Remove unused modules and drop overall script weight even more.
  • Bundlers ready - Modern setup? Using Rollup or Webpack? We have your back.
  • Extendable - Need something more custom-made? Plug-in your own modules with additional functionalities.
84 questions
1
vote
1 answer

how to use vue-glide-js events on nuxt and load more slides on last one

i'm new on all of these so i need help. first of all how vue-glide-js events work to begin with. its documentation just listed them without examples. And second and more important, i wanna send an axios request at the end of my carousel and load…
Mojtaba Barari
  • 1,127
  • 1
  • 15
  • 49
1
vote
1 answer

Get Current slide index with Glide.js

how can I get the current slide index/number when I swipe between elements with GLide.js const config = { type: "carousel", perView: 5, startAt: 2, perTouch: 1, focusAt: "center", }; new Glide(".glide", config) …
munirot
  • 97
  • 5
  • 16
1
vote
2 answers

Glide JS with react

followed the documentation and got the following error: TypeError: Cannot read property 'querySelector' of undefined. I have added the following to my index.html
Rob Terrell
  • 2,398
  • 1
  • 14
  • 36
1
vote
2 answers

Install Glide.js in Rails 6 with Webpack

I created a new Rails 6 project and I'm trying to install the third party javascript library Glide.js via Webpack. However, it seems like I'm missing a crucial step because it's not working. What I've done so far: Install Glide.js with yarn: yarn…
Debru
  • 83
  • 1
  • 6
1
vote
1 answer

Glidejs is not loading on mobile

I'm trying to add glidejs to a wordpress site, it's working perfectly on desktop, but on mobile, it's not loading, seems that the JS files aren't being executed. I don't see a single error in the console. This the codepen. On mobile I see 3 pictures…
Lynob
  • 5,059
  • 15
  • 64
  • 114
1
vote
1 answer

jQuery resize stops functioning, throws error - TypeError: this.listeners is undefined

The goal is to disable or enable slider functionality based on browser width. My code works perfectly the first couple times the window is resized from big to small/small to big, but then it stops disabling the slider when the window is >= 1200 and…
newtocode
  • 11
  • 1
1
vote
0 answers

How to fix this bug on Glide.js? The width of the active slide is always smaller than the others

I'm using Glide.js for a carousel, but the active item always has the width smaller than that of the others, and this is set by glide.js. And that height being smaller, makes it inconsistent and ugly, as you can see in this video:…
marcos souza
  • 701
  • 1
  • 10
  • 20
1
vote
1 answer

Autoplay Start/Stop with GlideJS carousel

I have a GlideJS carousel and need to pause autoplay when video is playing in a slide. The autoplay component has start and stop methods but I can't tell from the documentation how to access component methods. How do I access these methods? var…
lukemcd
  • 1,471
  • 2
  • 15
  • 24
1
vote
1 answer

[Glide warn]: Root element must be a existing Html node TypeError: this.root is undefined

I have one slider included in two pages index.html, about.html. The index.html page slider runs without problem, but another HTML file, about.html, has the error: [Glide warn]: Root element must be an existing Html node TypeError: this.root is…
1
vote
4 answers

Turn off dragging on Glide.js carousel

I want to turn off changing slide by dragging, and to go loop through slides just with 'prev' - 'next' buttons. I set swipeThreshold: false, as said in documentation https://glidejs.com/docs/options/. But I can still drag slides, as you can se in…
Nemus
  • 3,879
  • 12
  • 38
  • 57
1
vote
2 answers

On clicking element restart Glide.js

I have a lightbox with a glide slider in it. Glide.js is already initiated. I want on clicking my specified element to re-start the slider. When closing the lightbox I'd like to pause the slider. I can see that this is possible with the API but cant…
Stuart Nelson
  • 307
  • 2
  • 13
0
votes
1 answer

How to create slider like this?

I need to create a slider like this: Active slide is wider then others (not bigger! transform: scale is not suitable here). I used swiper, glidejs but didn't get a result. I want the active slide in the middle always to be wider than the rest. Here…
uiHellen
  • 25
  • 5
0
votes
0 answers

Glide.js doesn't working when slides coming from server Angular

I have a carousel with glide.js and each slide comes from server. After data has came , when I click to "next" button it have to go to the next slide but suddenly it stops working at all and browser lags. Here is My html:
0
votes
0 answers

Initialise a Glide carousel inside a modal launched with Alpine.js

I've forked a Codepen I found on how to launch multiple modals using Alpine.js: https://codepen.io/tyssen/pen/wvQqYLZ I've adapted a bit because I want to display a Glide carousel as part of the modal content. As you'll see in the Codepen above,…
Tyssen
  • 1,569
  • 16
  • 35
0
votes
0 answers

Glide.js not rendering fully when parent container is display: none/visibility: hidden

I am using https://glidejs.com/ - in a normal pag view the glide slider is rendered correctly. However i have a use case were I have a display: none; + visibility: hidden; for the main div parent container on page load. After a few seconds, with…