How to make image clickable in automatic and manual slideshows?
Question
I have created an automatic slide show with manual controls and i want to make images clickable too.so for that, I have put image tag inside anchor tag but it is not clickable. If anyone knows how to solve this please help.
<div class="slideshowContainer">
<img class="imageSlides" src="{{ url('assets/images/1.jpg') }}" >
<img class="imageSlides" src="{{ url('assets/images/2.jpg') }}">
<a href="{{url('myUrl')}}"><img class="imageSlides" src="{{ url('assets/images/3.jpg') }}" ></a>
<img class="imageSlides" src="{{ url('assets/images/4.jpg') }}" >
<img id ="leftArrow" class="slideshowArrow" src="{{ url('assets/images/left_arrow-01.png') }}">
<img id ="rightArrow" class="slideshowArrow" src="{{ url('assets/images/right_arrow-01.png') }}">
</div>
2 answers
solution1
0 2020-02-28 08:42:32
Here is manual clickable slideshow. Is this what you are looking for?
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } .mySlides {display:none;} <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides" src="img_snowtops.jpg" style="width:100%"> <img class="mySlides" src="img_lights.jpg" style="width:100%"> <img class="mySlides" src="img_mountains.jpg" style="width:100%"> <img class="mySlides" src="img_forest.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button> </div>solution2
0 2020-03-04 11:00:31
Sorry for the late response.
The slider is working fine but yeh we have to tune it a bit.
<img class="imageSlides" src="{{ url('assets/images/1.jpg') }}" >
The issue with anchor tags is because of the absolute position. Since the image is absolute , the anchor tag got no content inside making it's width and height 0x0.
<div class="image_wrapper imageSlides">
<a href="sdsd" class="slide_link">
<img class="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" >
</a>
</div>
We can contain the image and the anchor tag within a div tag and make them absolute.
Note: Added div tag only to give the code a better structure. You can remove them and move the imageSlides class to the anchor tag.
Note: You have to make images to fill the div tags/anchor tags. You can use the below-provided code to make image fill the div tag.
img{
width: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.