Ask Questions and Find Answers

Hi.
If you are using Liferay 7 or above, you can use the following forum post.  It has some nice examples of multi-image carousels using bootstrap 4.  The examples show 4 or 5 images, and either scroll on 1 at a time, or scroll 4 or 5 at a time.  However, if you are on Liferay 6.x, there are also some bootstrap 3 example further done the page.
https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once
I used this to create our own multi-image carousel.  Start by creating a simple web content structure and template, and copy the example code into the template. Once you get this working, you can then work on getting the carousel to work with your Liferay data.  The following blog shows you how to do this for simple single-image carousel.
https://liferay.dev/blogs/-/blogs/liferay-dxp-tutorial-carousel-template
I hope this helps.
Rob.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
    <#if Title.getSiblings()?has_content>
    <#list Title.getSiblings() as cur_ContentHeader>
        <li data-target="#carouselExampleSlidesOnly"
data-slide-to="${(cur_ContentHeader?counter == 1)?then(0, (cur_ContentHeader?counter - 1))}"
            class="${(cur_ContentHeader?counter == 1)?then('active', '')}"></li>
        </#list>
    </#if>
    </ul>
    <div class="carousel-inner">    <#if Title.getSiblings()?has_content>
    <#list Title.getSiblings() as cur_ContentHeader>
        <div class="${(cur_ContentHeader?counter == 1)?then('active', '')}
        carousel-item">
          <div class="row">
            <div class="col-sm-12">
                <#if cur_ContentHeader.TitleImage.getData()?? && 
                cur_ContentHeader.TitleImage.getData() != "">
                <div class="bannerHomepage" 
                style="background-image:url(${cur_ContentHeader.TitleImage.getData()})">
                </div>
                </#if>
            </div>
            
        </div>
        </div>
        </#list>
        </#if>
    </div>
</div><script></script>Ignore My CSS classes