I am quite new to coding from scratch, but I am trying to build a very very simple website. And I wanted an image carousel at the start. I already have it coded // I copied some code from a tutorial.
My problem is that, when I open my websites front page the first image doesn't load in, until I either click forwards or backwards. And I want it to load image 1 as soon as the website loads in. Can anyone help me with that?
index.html
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
script.js
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Maybe you forgot to copy the "dots"-elements from the tutorial. If you get errors in your console, this could be the reason, why it aborts further execution.
Try to change your HTML as follows:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I added the three "dots"-elements. If you don't want them, you can remove them from the HTML, but you have to remove every JS code that works with the dots variable.
Here is the JS code without the dots handlings:
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}