Carousel showing multiple images

I had an image carousel in a WordPress site, that showed a sliding group of three images, from a set of 20 or so. What is the best way to do this in Blocs? I have the basic carousel working ok but showing only one image at a time.

I have searched and only found someone else asking something similar. Is there a way?

What you had was a slider, rather than a carousel. If you want a similar effect using the standard carousel. create your slides in an image editing app by placing three images in a row within a single slide. Alternatively, you will have to add in a slider widget - not sure if there is one in the Blocs store, but you could take a look. Here is an example slide placed in a carousel bric:

1 Like

Yeah, thanks. There are some available in the store at around €15; possibly more than we need.

Thanks!

Hi @LeeHamm

You can implement your own. It is not overly complicated.

A couple of options (I have used Swiper.js a number of times).

and

5 Likes

Many thanks! I will check these out.

I am building a site at the moment using Splide. I think it’s my new favourite. Very very easy to use.

3 Likes

thanks for your recommendation of Splide!
It looks easy for a “real” developer but me I’m just trying to copy paste snippets all the time … :wink:
Is there a tutorial on how to include the spline stuff in Blocs like, header. footer, below body…? And I’m confused which code to use for the carousel showing multiple images at once…

Hi @burnardo. It’s actually not complicated to add Splide to your Blocs website. I’m not a coder at all and probably I’m taking to the tourist route to get there. :upside_down_face: :palm_tree: :desert_island: But hey, it works! :grin: I’ll explain on how to add a basic carousel.
Here we go:

  1. Download Splide here:
    https://splidejs.com

  2. Unzip and locate the files: splide.min.js and splide.min.css.
    Attach both in the project settings of your file.

  3. Add the following scripts in the project header:

To create an unordered list of images I use the list bric :crazy_face:

Build a bloc structure by following the image below. As you can see the ‘list’ is nested within 2 DIV’s.
Add all the classes and give the main div the ID: #image-slider.


And the result will be:

Kapture 2021-10-08 at 14.59.40

From here you can make it fancy with all styling options available in Splide.

Have fun!

4 Likes

Thank you Jerry, I need simple instructions like that! It’s working now! I even found out where and how to put the code for the multiple slides per page…

1 Like