Search code examples
wordpresswordpress-themingwordpress-gutenberg

Wordpress - How to make multiple custom sliders on the same page?


Wordpress noob here, currently working a custom theme.

I'm trying to figure out what is the best way to make a custom slider on my page. I don't want to use a slider plugin, I need to make it myself since it should respect a specific behaviour and a specific design. Doing it in vanilla JS wouldn't be a problem, but of course I need the content (images and texts) to be editable in Wordpress. The thing is I need this slider to be instanciated multiple times on the same page (there will be 3 carousels on top of each other, with different content each time).

Here is what I considered:
- Using "Group blocks" in Guttenberg, to group the needed data (images, titles, descriptions) and using class names to retrieve it in javascript and css to do all the work there. But that would be messy, there must be a better way.
- Using "Custom HTML" blocks in Guttenberg, but in addition of being ugly, there would be too many risks of error for the person editing the content. Again, that can't be the right way.
- Using "Custom fields". I tried using the "Advanced Custom Fields" plugin, which was a bit of a pain, but promising. However it seems you can only have one Field group on the same type per page. So, I can create a custom field group to take care of all the fields of a slider, but I don't know how to handle multiple sliders on the same page with this plugin.

It can't be that hard though, am I missing something?


Solution

  • You can use ACF to do Gutenberg blocks. This should actually work fine to do just what you are trying to do.

    Its been a while but I believe Gutenberg adds its own ID to the block so you could grab that to instantiate the slider on.

    https://www.advancedcustomfields.com/resources/blocks/