We will use Glider.js to easily create draggable galleries that are highly customizable. These can not only display images but can be used for news item carousels and more.

Glider.js is written in Vanilla JS and is very lightweight.

Download Glider.js:
https://github.com/NickPiscitelli/Glider.js/archive/master.zip

Docs & Guide:
‍https://nickpiscitelli.github.io/Glider.js/

See a basic demo here:
‍https://ops-gallery-demo.webflow.io/

Step 1

The gallery slider only needs to have a parent div and children elements. You can manually set these by using a div layout such as:

<div class="slider">
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
  </div>

In our case we are going to use a Webflow CMS collection to display some images though! This can be in whatever format you like but as long as there is a nested list of items.

In the Designer view these images will appear stacked on top of each other for the moment. Once we finish setting everything up the goal is to turn these into a nice interactive slider gallery!

Note: Custom code does not preview in the Webflow Designer view, so we will need to publish our code before it works.

Step 2

Once your div layout or collection is setup we need to bring in the Glider.js library.

Download the latest version of the library here (This tutorial uses version 1.7.4):
https://github.com/NickPiscitelli/Glider.js/archive/master.zip

Also available here:
Download link

In the Pages panel click the cog icon for the page the gallery is on to edit the page settings.

‍

Scroll down to the last section “Custom Code”

Add the Glider.js minified stylesheet between a <style> & </style> tag.

Add the minified Glider.js source code between a <script> & </script> tag.

‍

Step 3

We need something to target our slider with, in this case you can either give a unique class or ID. I prefer using ID (gallery-slider in this case) but either will work fine.

‍

Step 4

Now that we have the Glider.js code installed we can activate the slider with another snippet here, specifying the querySelector ID as the same ID we set in Step 3 (#gallery-slider).

  new Glider(document.querySelector('#gallery-slider'), {
    slidesToShow: 2,
    dots: 'false',
    draggable: true,
    arrows: false,
  });

That is it! Hit publish and go and check out your new minimal slider gallery. There are a bunch of options you can do like adding arrows, dots, and more. Options are just added into the code snippet between the curly braces!

Notes

We have added the Glider.js library only onto the gallery page. This is great if you are only using the slider on one page, but if you would like to have the slider on other pages you can simply move the css and Glider.js source files from the page Custom Code to the site-level Custom Code section which can be found under ‘Custom Settings’.

‍

Adding a second gallery

To add a second gallery on the page all we need to do is add another new Glider snippet as in step 4, but rename the target.

Remember we do not need to duplicate the library source code, we only need one copy of that. 

‍

Have a Project or Need Help?

One Project Studio are NZ Webflow Experts and we would love to hear from you.
‍
‍Reach out to us with your project or idea!