I have created a slideshow with custom navigation bullets. Each bullets have its own customized rounded images.Now the problem is I have background images for each bullets and it should appear when bullets has been clicked or active.
I have tried to add using .active css functionality like below to change background image but it is not working.
CSS
.bulletOne:active {
background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png");
}
My full HTML code has been added below for your reference along with css, html and js Please help me. Thank you in advance
Except image link everything else work fine you could test by replacing those links in w3schools try it platform
Full code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* 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) */
/* The dots/bullets/indicators */
.dotOne {
cursor: pointer;
height: 75px;
width: 75px;
padding: 8px 40px 20px;
margin: 0 2px;
background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/Cyberpunk-2077.png");
border-radius: 50%;
display: inline-block;
transition:background-color :#ffffff;
}
.dotTwo {
cursor: pointer;
height: 75px;
width: 75px;
padding: 8px 40px 20px;
margin: 0 2px;
background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/Sales_Icon_Cropped.png");
border-radius: 50%;
display: inline-block;
transition:background-color :#ffffff;
}
.dotThree {
cursor: pointer;
height: 75px;
width: 75px;
padding: 8px 40px 20px;
margin: 0 2px;
background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png");
border-radius: 50%;
display: inline-block;
transition:background-color :#ffffff;
}
.dotFour {
cursor: pointer;
height: 75px;
width: 75px;
padding: 8px 40px 20px;
margin: 0 2px;
background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/Age-of-Empires-IV.png");
border-radius: 50%;
display: inline-block;
transition:background-color :#ffffff;
}
.dotFour:active {
background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png");
}
/* 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}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div style="text-align:center">
<span class="dotOne" onclick="currentSlide(1)"></span>
<span class="dotTwo" onclick="currentSlide(2)"></span>
<span class="dotThree" onclick="currentSlide(3)"></span>
<span class="dotFour" onclick="currentSlide(4)"></span>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="http://localhost/wordpress/wp-content/uploads/2020/06/HellBlade_2.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_WarZone_PC.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://localhost/wordpress/wp-content/uploads/2020/06/Age-of-Empires-IV.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var dots;
var slides = document.getElementsByClassName("mySlides");
if(n==1){
dots = document.getElementsByClassName("dotOne");
}else if(n==2){
dots = document.getElementsByClassName("dotTwo");
}else if(n==3){
dots = document.getElementsByClassName("dotThree");
}else if(n==4){
dots = document.getElementsByClassName("dotFour");
}
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";
}
</script>
</body>
</html>
