how can I create a Carousel slider

RE: how can I create a Carousel slider

2020-07-24T07:58:23Z

chinmay abhyankar:

<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

Thank you for sharing it.
But as I said, I'm so newbie.
Actually I don't know where I can use that?
If it's possible, guide me in more detail.
Thanks in advance.

RE: how can I create a Carousel slider

2020-07-24T07:21:44Z

<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

RE: how can I create a Carousel slider

2020-07-21T14:53:14Z

Rob Hazel:

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.

Thank you for your guide.

I am so newbie. If it's possible, guide me in more amateur.

I use Liferay 7.3 ga 1

I can't find the "aspect ratio" field in web content structure.

how can I use the bootstrap to implement a carousel in my Liferay??

RE: how can I create a Carousel slider

2020-07-21T13:54:02Z

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.

RE: how can I create a Carousel slider

2020-07-21T12:06:38Z

Is there any solution?

RE: how can I create a Carousel slider

2020-06-08T13:12:55Z

Thanks for your help.

But this option will show a single image and slide that.

I want to display 4 of the 8 images and replace the 4 other images instead of 4 old images.

Sorry for my bad English.

RE: how can I create a Carousel slider

2020-06-08T08:49:54Z

You can add your images in "Media Gallery" widget and then configure your Media Gallery --> Select 'Carousel' in Display Template drop-down menu.
You can refer here.

how can I create a Carousel slider

2020-06-05T13:59:28Z

HiI want to create a Carousel slider with multiple images.Is there any widget for this?