Liferay 6.2 ce AlloyUi carousel not working

[Muhammed Shafeek V，修改在9 年前。]

Hi,

carousel it is not displaying images but button controls are changing and working fine.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui"%>

<portlet:defineObjects />



<aui:script>
AUI().use(
'aui-carousel',
function(Y) {
new Y.Carousel(
{
contentBox: '#myCarousel',
height: 250,
width: 700
}
).render();
}
);
</aui:script>

<div id="myCarousel">
<div class="carousel-item"
style="background: url(http://alloyui.com/carousel/img/1.jpg);"></div>
<div class="carousel-item"
style="background: url(http://alloyui.com/carousel/img/2.jpg);"></div>
<div class="carousel-item"
style="background: url(http://alloyui.com/carousel/img/3.jpg);"></div>
<div class="carousel-item"
style="background: url(http://alloyui.com/carousel/img/4.jpg);"></div>
</div>


<style>
.aui-carousel-item {
border-radius: 6px;
width: 700px;
height: 250px;
opacity: 0;
}
</style>

help me,
hopefully
Shafeek,

[Meera Prince，修改在9 年前。]

Hi

add following CSS in jsp page where you have used carousel.
Its some CSS problem.

<style>
.carousel-item {
position: absolute;
z-index: 1;
width: 700px;
height:250px;
}
</style>

Regards,
Meera Prince

[Muhammed Shafeek V，修改在9 年前。]

Thanks Meera.
now its working. But Meera that is not responsive. How to make that responsive?

Thanks in advance,
Shafeek.

[Miroslava Stancikova，修改在9 年前。]

I have the same problem.
All .carousel-item are position:abstract then they need fix width and height, and cannot be responsive.

[Muhammed Shafeek V，修改在9 年前。]

Hi,

As far as my knowledge, We can only make carousel responsive through css(@ meadia element)

check this url: https://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/using-an-alloyui-carousel-in-your-portle-liferay-portal-6-2-dev-guide-12-en


kind regards,

Shafeek

[Jonathan Mak，修改在9 年前。]

Hi Muhammed,

We have actually added responsiveness to many AUI components such as the carousel in alloy-ui/master. Please see https://github.com/liferay/alloy-ui/tree/master/src/aui-carousel for these updates to the carousel.

Please let me know if you have any questions. Thanks!

[Muhammed Shafeek V，修改在9 年前。]

Jonathan Mak:

Hi Muhammed,

We have actually added responsiveness to many AUI components such as the carousel in alloy-ui/master. Please see https://github.com/liferay/alloy-ui/tree/master/src/aui-carousel for these updates to the carousel.

Please let me know if you have any questions. Thanks!

Hi Jonathan,

I glad to know that.

I want to ask you one thing that , Is there any release plan for Alloy ui 3 which support latest version of bootstrap?

looking forward,

Shafeek

[Jonathan Mak，修改在9 年前。]

Hi Muhammed,

Actually the latest version of Alloy UI (https://github.com/liferay/alloy-ui) uses Bootstrap 3. Our next Alloy UI release will contain all the latest updates such as Boostrap 3, responsive AUI modules, and much, much more.

[Jonathan Mak，修改在9 年前。]

We have just released a pre-release of Alloy UI 3. The pre-release can be found at https://github.com/liferay/alloy-ui/releases/tag/3.0.0pr1

[Muhammed Shafeek V，修改在9 年前。]

Jonathan Mak:

We have just released a pre-release of Alloy UI 3. The pre-release can be found at https://github.com/liferay/alloy-ui/releases/tag/3.0.0pr1

glad to know that jonathan ,, We are waiting the release..