Dynamic & responsive slider using flickity library

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


For styling options go to Codeblock > CSS and edit it there. We have created variable setting for dots and arrows colors.

For slider setting (autoplay, displaying arrows or not) go to Codeblock > JS and set it there. We have commented our code so you will understand how to modify it.

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.