I’m creating a website for a football team and want a sliding image slideshow. The dots on the bottom of the slideshow, but for whatever reason I can’t interact with the arrow buttons (<a>).
Whenever I hover or try to click on the arrows (.prev or .next) nothing happens.
It is supposed to have a shadow/background on hover, and on click it is supposed to move to the next img in the slide show.
let slideIndex = 1
showSlides(slideIndex)
function plusSlides(n) {
showSlides(slideIndex += n)
}
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'
slides[slideIndex - 1].className += " active"
}#top {
position: relative;
z-index: -100;
width: 100%;
}
.mySlides {
display: none;
}
.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;
z-index: 100;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
#top a:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.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;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: .1
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bevan&display=swap" rel="stylesheet">
</head>
<body>
<div id="page">
<!--<div id="topnav">
<div id="modal">
<span class="close">×</span>
<div id="modaltext">
<h1>Home of the Panthers.</h1>
<h2>Pride. Tradition. Commitment.</h2>
</div>
</div>
</div>-->
<div class="toggle-btn" onclick="toggleFunction()">
<span></span>
<span></span>
<span></span>
</div>
<nav id="header">
<img src="pantherlogo.png" alt="Panthers Logo" id="logo">
<div id="navbar">
<h3><a href="index.html">HOME</a></h3>
<h3><a href="news.html">NEWS</a></h3>
<h3><a href="team.html">TEAMS</a></h3>
<h3><a href="contacts.html">CONTACTS</a></h3>
</div>
</nav>
<div id="top">
<div class="mySlides fade">
<img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
<div id="motto">
<h1>Restore the pride.</h1>
</div>
</div>
<div class="mySlides fade">
<img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
</div>
<div class="mySlides fade">
<img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
</div>
<div class="mySlides fade">
<img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
</div>
<a class="prev" onclick="plusSides(-1)">❮</a>
<a class="next" onclick="plusSides(1)">❯</a>
</div>
<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>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
<div id="main">
<div class="slide-up">
<div class="container reveal">
<div class="text-box">
<h1>Home of the Panthers</h1>
</div>
</div>
<div class="text-container reveal">
<div class="text-box">
<h1>Pride.</h1>
</div>
</div>
<div class="text-container reveal">
<div class="text-box">
<h1>Tradition.</h1>
</div>
</div>
<div class="text-container reveal">
<div class="text-box">
<h1>Commitment.</h1>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="map" class="footercontent">
<h3>Sitemap</h3>
<h4><a href="index.html">Home</a></h4>
<h4><a href="news.html">News</a></h4>
<h4><a href="team.html">Teams</a></h4>
<h4><a href="contacts.html">Contacts</a></h4>
</div>
<div id="contactus" class="footercontent">
<h3>Contact Us</h3>
<h4>Email</h4>
<h4>Twitter</h4>
<h4>Instagram</h4>
<h4>Facebook</h4>
</div>
<div id="copyright">
<h5>Copyright</h5>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="imageslide.js"></script>
</body>
</html>
2
Answers
It looks like you have a typo error "plusSlides(-1)".
To fix the issue, remove the negative
z-indexof -100 and correct the typo plusSides to plusSlides.Here is a sample code: