Liferay 6.1 CE AlloyUI carousel not working

[10年前 に Sunil Rai によって更新されました。]

I am able to deploy successfully some alloyui widgets (like datepicker etc ). But for carousel it is not displaying images but button controls are changing and working fine.

Here is my code for this plugin:

<%@ 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>

As I am new to alloy-ui it is difficult for me to debug it .

[10年前 に Mario Grimaldi によって更新されました。]

Sunil Rai:

I am able to deploy successfully some alloyui widgets (like datepicker etc ). But for carousel it is not displaying images but button controls are changing and working fine.

Here is my code for this plugin:

<%@ 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>

As I am new to alloy-ui it is difficult for me to debug it .

Hi! To make it work you just need to add this simple css rule:

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

Hope it helped

[10年前 に Sunil Rai によって更新されました。]

Thanks a lot Mario. It is working now

[10年前 に Amresh Kumar によって更新されました。]

ok the result is correct

[10年前 に Mario Grimaldi によって更新されました。]

I'm glad it worked! ;)

[10年前 に Kushal Jayswal によって更新されました。]

By default carousel has default direction as LTR (left to right).

I want to change the direction as - RTL (right to left)

Generally carousel comes with DIRECTION as one of the property. But in AUI carousel it's missing.
If we check with jQuery Cycle, we can control direction with FX property (below is the sample code):

$('#right').cycle({ 
    fx:      'scrollRight', 
    next:   '#right', 
    timeout:  0, 
    easing:  'easeInOutBack' 
});

I need expert help to change the direction to RTL in Alloy UI Carousel (version 1.5)

.

[10年前 に Mario Grimaldi によって更新されました。]

Kushal Jayswal:

By default carousel has default direction as LTR (left to right).

I want to change the direction as - RTL (right to left)

Generally carousel comes with DIRECTION as one of the property. But in AUI carousel it's missing.
If we check with jQuery Cycle, we can control direction with FX property (below is the sample code):

$('#right').cycle({ 
    fx:      'scrollRight', 
    next:   '#right', 
    timeout:  0, 
    easing:  'easeInOutBack' 
});

I need expert help to change the direction to RTL in Alloy UI Carousel (version 1.5)

.

Hi!
One possible solution would be to change the source code of the carousel adding the direction attribute.
I didn't try this directly on portal but I tried it with a jsfiddle here: http://jsfiddle.net/35wzc/2/
NOTE: The actual code to be changed starts from the "// CODE TO BE CHANGED" comment. Search for it in the page

The code in the fiddle shows the changes to be done in the "aui-carousel.js" file. You can find this file in this folder (if you are using tomcat):

liferay-folder/tomcat-7.0.27/webapps/ROOT/html/js/aui/aui-carousel/

I think that changing that file and the minified version should do the trick.
Give it a try and let me know ;-)

Best regards

[9年前 に Kushal Jayswal によって更新されました。]

Hi Mario Grimaldi,

Your solution is good and worked.

But what I need is to change the direction of carousel's sliding too.
I have changed in the code which gets the DIR attribute from HTML tag and added some logical statements accordingly to make it work.