Stack Overflow
Stack Overflow

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
0
votes
1 answer

glide js - change number of steps (slides) after using controls

I'm using a glide JS carousel to show some content as a carousel. Docs of the repository are on the website and github. My current code is following: jQuery( window ).load(function() { var slidesNumber = null; …
Paweł Skaba
  • 671
  • 1
  • 17
  • 49
0
votes
1 answer

Glide.js // Glide is not defined

So I've been trying to get glide.js to work on my project. Did all the steps as it says in the official documentation, but once I start the glider with new Glide(".glide").mount(); (just like it says in the documentation) in my web console I…
DaivarasDev
  • 17
  • 1
  • 5
0
votes
0 answers

Glidejs With iframe content

Is it possible to have iframe as an element for glidejs carousel? When I add iframe as one of the li elements I cannot scroll anymore. Here is an example. https://codesandbox.io/s/immutable-currying-yvecd?file=/index.html
Adam Bielecki
  • 657
  • 2
  • 6
  • 20
0
votes
1 answer

GlideJS - Cannot read property 'children' of undefined

I'm using GlideJS version 3.4 on a site to make a simple slider. This is my how I'm mounting GlideJS var slider = $('.glide'); if (slider) { var glide = new Glide('.glide', { type: 'carousel', startAt: 0, perView: 2 }).mount(); } else { …
Dilion Smith
  • 31
  • 7
0
votes
1 answer

Rails 6 GlideJS carousel issues (without jquery)

I have been looking for a way to remove the need for jQuery in my project. The carousel is my last bastion of jQuery, so I am trying to set up GlideJS for a carousel with does not rely on jQuery. When I run new Glide({}) in rails console I get…
Argent
  • 303
  • 1
  • 12
0
votes
1 answer

unable to set same width and height on all images

I have made an image slider using javascript with the Glider library like below . As you can see in my image however the third image is not aligned like the first 2 and has different height . My first two images in my image folder have the same…
vasilis 123
  • 585
  • 1
  • 12
  • 26
0
votes
1 answer

GlideJs adding buttons

I created a glider that works good, no problem with the functionality, what I'm trying to achieve is to add a button inside the slides. So far, the links and all the slide content works good but not the button click event. I tried adding the…
Victor Shinobi Gakiya
  • 73
  • 7
0
votes
0 answers

image not loading on web page

this is the js code if(slider2){ new Glide(slider2, { type:'carousel', startAt: 0, hoverpause:true, preview: 4, animationDuration: 800, animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.44,…
MetechNig
  • 9
  • 3
0
votes
1 answer

Uncaught TypeError: Glide is not a constructor - Using Glide.js with Laravel

I have Glide.js installed on Laravel 8. I was using the CDN to test it out and everything was working fine. When I installed it with NPM, I get this: Uncaught TypeError: Glide is not a constructor This is how I have it in bootstrap.js: window.Glide…
Kenny King
  • 33
  • 11
0
votes
1 answer

Defining listener function inside function

When I define a function outside the function, I cannot access the glide parameter: export const setFocusListenersForKeyboardNavigation = (glide) => { const slides = glide._c.Html.slides; for (let i = 0; i < slides.length; i++) { …
funky-nd
  • 637
  • 1
  • 9
  • 25
0
votes
1 answer

Trigger function when carousel set to autoplay in Glidejs

I have a GlideJS carousel and I'm trying to call my handleAnimation function after each slide becomes active. It works if I click on it, but I don't know how to get it to run when the carousel is on autoplay. componentDidMount = () => { const…
Mega88
  • 29
  • 5
0
votes
1 answer

how to remove whitespace at the bottom of glide.js?

Can anyone please help me remove whitespace at the bottom of image or slider? Image preview: project code link http://playcode.io/661392 I have downloaded and used css file for glide.core.min.css and glide.theme.min.css since CDN didn't work
Dubz
  • 13
  • 1
0
votes
1 answer

Why GlideJS doesn't set event listeners in IE11?

I've implemented 2 sliders with Glide.js and they work well in Chrome and FireFx. I've tried to implement it in IE11 and Edge and both won't add events to DOM elements, so neither slider works. Moreover, at some width I'd like to make more than 1…
Nikita Lyapin
  • 5
  • 2
0
votes
1 answer

The final image in glide.js is not visible when image sources are set through jQuery

When creating slides for a glide carousel and I assign the sources in the HTML, the carousel works as intended.
    • MichaelJHla
    • 1
    0
    votes
    0 answers

    Can't get glidejs working with pug template

    I have imported the three files inside my project (core, theme and glidejs) But the layout seems weird : HTML: doctype html html(lang=fr) head title= 'Toutounet' link(rel='stylesheet' href='/assets/glide/glide.core.min.css') …
    Sercurio
    • 70
    • 7
    1 2 3 4
    5
    6