liferay dxp aui carousel

[sony lion, geändert vor 6 Jahren.]

Using AUI carousel in liferay DXP
Liferay DXP uses AUI version 3.0
On each image it has redirect to different url.
For following demo code redirection is not working
Not able to give link to images.

<div id="myCarousel">

  <a href="http://www.example1.com"><div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/2.jpg);"></div></a>
  <a href="http://www.example2.com"><div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/3.jpg);"></div></a>
  <a href="http://www.example3.com"><div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/4.jpg);"></div></a>
</div>


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

</script>

Any solution ?

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

Thread moved to the Home » Alloy UI » English forums.

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

Hi Sony,
When you say:

For following demo code redirection is not working
Not able to give link to images.

Do you mean:

• When a user clicks the links he will (incorrectly) not navigate to another paged.
• The images do not appear in your carousel.
• Both of the above.

What is the actual problem?

- Kyle

[sony lion, geändert vor 6 Jahren.]

Hi Kyle

image is coming fine..
Functionality is ...Every image has its own link to open... like image1 has www.example1.com to redirect (nothing to do with liferay redirection)

I am not able to add anchor tag to those image divs.
after adding those anchor tag and you run program by inspecting element you ll relies anchor tag we have added is not there... means its creating standard structure in it...

This was not happening with AUI version 2.x in liferay 6.2

But in DXP liferay uses AUI version 3.x its giving this issue.


For convenience attaching demo.html .... you can see sample

[Kyle Joseph Stiemann, geändert vor 6 Jahren.]

Hi Sony,
Thanks for posting the example code. With a little tweaking, I was able to reproduce your issue. You are correct that this worked in AlloyUI 2.0.0 and does not work in 3.0.0. I recommend that you create a bug report for the AlloyUI project with example code (that works in 2.0.0 and does not work in 3.0.0) to let them know that this is a problem. There seems to be an easy workaround though. I wrote up the solution here: https://stackoverflow.com/questions/45074349/how-to-add-link-to-images-of-aui-carousel/45082404#45082404

Let me know on StackOverflow if that solution worked for you.

- Kyle