Trouble with setting up Glider.js

Design help Custom code
1

Hey guys,

I was wondering if someone could please give me a hand?

I’m trying to set up Glider.js carousel on a Webflow site but not having much luck :confused: If anyone has any insight to what I am doing wrong it would be greatly appreciated.

I’ve set up the custom code on the page as followed:


Inside head tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">

(Both the CSS and JS cdn links were provided on the Glider.js Github page)

Before body tag:

<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>

<script>
new Glider(document.querySelector('.glider'), {
  slidesToShow: 5,
  slidesToScroll: 5,
  draggable: true,
  dots: '.dots',
  arrows: {
    prev: '.glider-prev',
    next: '.glider-next'
  }
});
</script>

(Code copied from the ‘Multiple Section’ demo here.)


Page layout:

The layout of my page is as followed, the glider div has a class named ‘glider’

21

Does anybody know what I’ve done wrong? I managed to get a similar effect working using Slick Carousel. I would stick with this but unfortunately each slider locks into place, which I’m keen to avoid and much prefer Gliders approach to its carousel as it doesn’t do this.

Thanks in advance.

Here is my site Read-Only: LINK

Link to published site trying to use GliderJS

Link to published site using Slick Carousel

2

Hi Henry ! Welcome to the amazing forum of Webflowers :smiley:

Maybe the problem is that you don’t have the .dot, .glider-prev and .glider-next divs?

3

Hi Avivtech

Thanks for your reply.

Good thinking! I tired adding in the extra divs but unfortunately no luck :frowning:

I’ve managed to find an alternative workaround to my problem so that I don’t have to use glider.js any more, so will park this issues for now.

Thanks for your help anyways.

4

Henry,

I’d really love to know what alternative you used, if you would be willing to share it with me please? I was looking at Glider.js recently.

Best regards

5

Hi Andy

I basically used Webflow interactions to move the content as the page scrolls. I was after a full page portfolio page so this worked perfectly for what I was after. I’m not too sure this would be the the best route to take though if you are just after a carousel.

I’ve added this as a new page in the site read-only link so you can see a demo of the page as well as the code. You may also find this tutorial really helpful Creating a horizontal scrolling page without coding - YouTube

Although this worked for what I needed it does have it’s limitations. The scroll intreaction doesn’t work well on any tablets or devices as you have to scroll up and down to move the content left and right which is not intuitive in the slightest!

So in these instances I changed the layout on the tablet / mobile breakpoints and added a bit of custom code for landscape tablets as they still fall in Webflow’s Desktop breakpoint.

Alternatively I also had a bit of success using Slick Carousel which can also be found in the site read-only link but just wasn’t quite right for what I was after.

Hope that helps! Any questions let me know.

1 Like
6

Really appreciate you taking the time to get back to me :slight_smile: will check both of those links out!

Thanks again