First of all, wish everybody a happy new year and a lot of success in your business.
Ok so that being said, i think i just found a workaround to create a cms slider very easily using pagination.
In my example i’ve created a simple collection with title, image, and description
Now you want to add the collection list, in the page you want your slider to be, and set the pagination like so :
The concept for layout is : the collection list is the slider, the items are the slides.
So you cant your slider (here the collection list) to go full width, and with a height set for example.
Your slides are 100% width and height.
Add a background image on your item and choose background image from your collection image data.
Finally delete the text from pagination
Make it vertically center using flexbox, absolute positioning or whatever you feel, custom the icons and you are done.
Also note that you can add some interaction to the slider too.
Here i’ve added a initial appearance on collection item with opacity 0, and a opacity 100% with a load trigger. Arrow left and right reset collection item to 0% opacity.
I guess you could go crazy with interaction, just keep in mind that it loads a new page when you change the slide, so keep the load trigger.
Credits goes to @sabanna and @vincent for interaction (amazing idea thanks guys).
Hope this will help you guys,
Here is the read only project :
Published version :
Cloanable version :