1: Another Carousel Question
Posted by Peter D. on 06/03/24 08:09

I have a page on our website which includes 2 carousels of photographs. These each occupy the full width of the page, which obviously takes up quite a bit of space.

Is it possible to place the two carousels themselves into a grid so that they appear side by side on the page?

Thanks

Peter 

2: Re: Another Carousel Question (response to 1)
Posted by Joe Oldak on 08/03/24 21:50

The only "out of the box" way is to use page columns and put a carousel into each column. The columns aren't all the same size though.

It would be possible to get it to work using some Raw HTML includelets to split the main column into two but it's a bit advanced!

Essentially what you would need to end up with is something like this:

Raw HTML with this HTML in it:

<div class="row">
<div class="col-xs-12 col-md-6">

Then your first Carousel

Then Raw HTML with:

</div>
<div class="col-xs-12 col-md-6">

Then Second Carousel

Then Raw HTML with:

</div>
</div>

The idea is that the first Raw HTML sets up set of rows and starts the first column with in that. Then the carousel. Then the second Raw HTML ends the first column and starts the second. Then a carousel. Then the last Raw HTML ends the second column and the row set.

Hope this help!?

Joe

3: Re: Another Carousel Question (response to 2)
Posted by Peter D. on 18/03/24 14:43

 

Thanks Joe.

That gives me exactly the effect I was after.

Regards

Peter

4: Re: Another Carousel Question (response to 2)
Posted by Men in Sheds Winslow on 15/01/25 16:57

I can see that I would like to do similar. Would it be possible to create two Includelets 'Split Column Start' and 'Split Column End'?

5: Re: Another Carousel Question (response to 4)
Posted by Joe Oldak on 18/01/25 15:13

Start/End includelets for content might conceptually work, but it'd be a bit fiddly as you'd also need one between each column, and there'd need to be some settings for the column widths.

So in fact you'd probably need a 'row start', 'row end', 'column start', and 'column end' and put them all in the right order with the correct configuration settings, which is probably more complicated than the Raw HTML includelet solution.

Using Raw HTML includelets as outlined earlier in this thread would work fine, in the situation that you want two columns on wide screens with one stacked above the other on narrower screens.

For more info on how rows/columns work in Bootstrap you can have a look at the documentation here. In essence you need to start a row, then put in all the columns with appropriate widths, then close the row.

Thanks

Joe