I've been struggling to find a solution for this issue. This is my first attempt at using JS as I am in the process of learning. It's very likely that I'm not fully grasping the answers from my searches - apologies for that.
What I'm looking for is a JS carousel, created from an array, complete with Prev/Next buttons (eventually making it responsive, but that can wait). My main goal is to have captions displayed below each image. I managed to get the carousel working, but when I click on Prev or Next, I end up getting a text link instead. And adding the caption array has proven to be quite challenging (I temporarily removed the JS for captions as it was causing further issues).
Here is the relevant HTML:
<body onload="changePilt()">
<span id="prev" class="arrow">❮</span>
<div class="karussell" id="karussell">
<a href="#"><img class="karu" name="esislaid"></a>
</div>
<span id="next" class="arrow">❯</span>
<div class="caption">
<h3 name="esikiri"></h3>
</div>
</body>
Also, here is the CSS code:
.karussell {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.arrow {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
color: #00A7E0;
margin-top: -22px;
padding: 16px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
#next {
right: 0;
border-radius: 3px 0 0 3px;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(0,0,0,0.8);
}
.caption {
text-align: center;
color: #00A7E0;
padding: 2px 16px;
}
.karu {
max-width: 75%;
}
@media (max-width:767px){.karu{max-width: 95%;}}
And finally, the JavaScript section:
var i = 0;
var s = 0;
var esileht = [];
var aeg = 5000;
//Image List
esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';
//Change Image
function changePilt (){
document.esislaid.src = esileht[i];
if(i < esileht.length -1){
i++;
} else {
i = 0;
}
setTimeout("changePilt()", aeg);
}
document.onload = function() {
}
// Left and Right arrows
//Next
function jargmine(){
s = s + 1;
s = s % esileht.length;
return esileht [s];
}
//Previous
function eelmine(){
if (s === 0) {
s = esileht.length;
}
s = s -1;
return esileht[s];
}
document.getElementById('prev').addEventListener('click', function (e){
document.getElementById('karussell').innerHTML = eelmine();
}
);
document.getElementById('next').addEventListener('click', function (e) {
document.getElementById('karussell').innerHTML = jargmine();
}
);
I believe the solution is straightforward, but unfortunately, I haven't been able to figure it out...