I have searched high and low for a solution to my problem - I am new to coding and have tried to insert a slideshow into my website using javascript... Everything works fine just the first image does not show for whatever reason? I assume the answer is to do with something in my css file but I could be wrong? When I click on the dots at the bottom of my page the slideshow works and images fire up, it's just getting the first image to show that is the problem.
Any help would be greatly appreciated :)
var 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) {
var i;
var slides = document.getElementsByClassName("mySlides");
var 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";
} * {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display:none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-
through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
} <html>
<head>
<script src="slideshow-container.js"></script>
<link href="css/styles.css" "slider.css" rel="stylesheet"
type="text/css" media="screen" >
<link href="css/slideshow-container.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div id="wrapper">
<div id="logo">
<li>
<div id="links">
<ul>
<li></li>
<li></li>
<li><a href="index.html">Welcome </a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Treatments</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<a href="maintest.html"><img src= "Images/untitled folder/My
Choice Logo.jpg" width="350" class="fade">
</a></li>
</div>
<p> </p>
<p> </p>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div id="slide1" class="mySlides fade">
<img src="Images/untitled folder/My Choice Logo.jpg"
style="width:100%">
</div>
<div class="mySlides fade">
<img src="Images/untitled folder/Natural-Dog-Law-2-To-dojhgs,-energy-
is-everything.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src= "Images/untitled folder/Treatment room.jpg"
style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
