Message Boards

  1. Home
  2. General
  3. How do I add a link to the carousel images?

How do I add a link to the carousel images?

Tiago Machado, modified 5 Years ago.

How do I add a link to the carousel images?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts
Hello friends,
I made a simple Carousel where I have 4 images, its working fine but I wanted to add some linking to the images, if I click in the image it should lead me to some page, for example google.com.

I tried a lot of things but none work emoticon

here is the code I have:
​​​​​​​
<%@ include file="/init.jsp" %>
<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>

<div id="myCarousel">

&nbsp; <div class="image-viewer-base-image" align="center">
&nbsp; &nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;<a href="www.google.com">
&nbsp; &nbsp;&nbsp; &nbsp;<img src="http://localhost:8080/documents/20126/301163/sotc.jpg/c4862272-31e9-f945-29b6-9e3c807b0e94?t=1554131155303">
&nbsp; &nbsp;&nbsp; &nbsp;</a>
&nbsp; &nbsp;&nbsp; &nbsp;<!--  
      style="background: url(http://localhost:8080/documents/20126/301163/sotc.jpg/c4862272-31e9-f945-29b6-9e3c807b0e94?t=1554131155303);">
      -->
&nbsp; &nbsp;&nbsp; &nbsp;</div> &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
&nbsp; <div class="image-viewer-base-image"       align="center"  style="background: url(http://localhost:8080/documents/20126/301163/sekiro.jpg/9b9c4d15-43fa-ae07-0527-1d4d14f6ca5f?t=1554131155554);">
&nbsp;&nbsp;
&nbsp; </div>
&nbsp;&nbsp;
&nbsp; <div class="image-viewer-base-image"       align="center"  style="background: url(http://localhost:8080/documents/20126/301163/dmc.jpeg/1deee1c2-bd97-5c71-5cba-3feeb6cd3767?t=1554131155678);">
&nbsp;&nbsp;
&nbsp; </div>
&nbsp;&nbsp;
&nbsp; <div class="image-viewer-base-image"       align="center"  style="background: url(http://localhost:8080/documents/20126/301163/kh_trailer_still_img.jpg/5eca8c8e-7b1f-741e-3787-21d6b7cc0e78?t=1554105748266);">
&nbsp;&nbsp;
&nbsp; </div>
&nbsp;
</div>

<aui:script>
YUI().use('aui-carousel', function(Y) {
&nbsp;&nbsp; &nbsp;new Y.Carousel({
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;activeIndex: 'rand',
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;contentBox: '#myCarousel',
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 700,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;intervalTime: 4,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 1175,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;animationTime: 1.
&nbsp;&nbsp; &nbsp;}).render();
});
</aui:script>
​​​​​​​
as you can see, I was trying to make a link to the image in the first carousel image, but its not working emoticon

thank you for your time
Tiago Machado, modified 5 Years ago.

RE: How do I add a link to the carousel images?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts
I couln't do it that way so I found a useful page that helped me a lot doing my clickable carousel.

for those who need it: https://codepen.io/JacobLett/pen/PjKLgK

Just need to make the changes to what you need to display, and import the css using : 
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/main.css" />

that works fine, hope it helps those in need.