Slider with thumbnails control and integration with HappyFiles (Swiper JS)

Demo link:

Vanilla block
Copy this block
Automatic.css block
Copy this block
Oxyninja block
Copy this block


You need to have HappyFiles plugin installed and category for your media created. We are not using Repeater element in this block because it doesn´t make sense since we are retrieving just image and its title from the media file – like this we avoid unnecessery code and bloat.

1. Set the category ID of your HappyFiles folder in PHP section of Code block (Block settings)

2. To control styling, go to CSS section of Code block and set it via variables.

3. To change number of thumbnails, go to JS section of Code block and in parameter “slidesPerView” set your desired number.

How to use it?

1. Copy the block

By clicking you will copy the code generated by Hydrogen plugin

2. Paste the code

For that you will need a Hydrogen plugin or its free version Hydrogen Paste.

3. Edit content

Adjust content and styling to your needs. All elements are using unique classes so they won´t colide with each other.