Foren
Liferay 6.1 CE AlloyUI carousel not working
Sunil Rai, geändert vor 10 Jahren.
Liferay 6.1 CE AlloyUI carousel not working
Junior Member Beiträge: 57 Beitrittsdatum: 31.01.12 Neueste Beiträge
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:
As I am new to alloy-ui it is difficult for me to debug it .
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 .
Mario Grimaldi, geändert vor 10 Jahren.
RE: Liferay 6.1 CE AlloyUI carousel not working
New Member Beiträge: 9 Beitrittsdatum: 13.12.11 Neueste BeiträgeSunil 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
Sunil Rai, geändert vor 10 Jahren.
RE: Liferay 6.1 CE AlloyUI carousel not working
Junior Member Beiträge: 57 Beitrittsdatum: 31.01.12 Neueste Beiträge
Thanks a lot Mario. It is working now
Amresh Kumar, geändert vor 10 Jahren.
ok the result is correct
New Member Beitrag: 1 Beitrittsdatum: 07.06.13 Neueste Beiträge
ok the result is correct
Mario Grimaldi, geändert vor 10 Jahren.
RE: Liferay 6.1 CE AlloyUI carousel not working
New Member Beiträge: 9 Beitrittsdatum: 13.12.11 Neueste Beiträge
I'm glad it worked! ;)
Kushal Jayswal, geändert vor 10 Jahren.
RE: Liferay 6.1 CE AlloyUI carousel not working
New Member Beiträge: 18 Beitrittsdatum: 19.11.12 Neueste Beiträge
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):
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).
Mario Grimaldi, geändert vor 10 Jahren.
RE: Liferay 6.1 CE AlloyUI carousel not working
New Member Beiträge: 9 Beitrittsdatum: 13.12.11 Neueste BeiträgeKushal 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
Kushal Jayswal, geändert vor 9 Jahren.
RE: Liferay 6.1 CE AlloyUI carousel not working
New Member Beiträge: 18 Beitrittsdatum: 19.11.12 Neueste Beiträge
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.
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.