htmlcssslideshow

Is there a way to remove the background color on page navigation link without removing it from slideshow widget?

I have attached a screenshot that explains better what I'm trying to achieve. I am having trouble figuring out how to remove the background color that is showing up on my website page navigation link, without the background color disappearing from the dots that go with the slideshow on my page. Is there some extra code I can add to differentiate the two?

This is the section of code that is the problem:

.active, .dot:hover {
  background-color: #717171;
}

Here is the complete code I am using for the slideshow:

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";  
  dots[slideIndex-1].className += " active";
}
* {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: 570px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #444444;
  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(255,255,255,0.8);
}

/* 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 {
  animation-name: fade;
  animation-duration: 1.5s;
}

@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}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="slideshow-container">

<div class="mySlides fade">
  <img src="https://xofarragio.com/resources/bags/bag_1080x1080_01.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://xofarragio.com/resources/bags/bag_1080x1080_02.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://xofarragio.com/resources/bags/bag_1080x1080_03.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://xofarragio.com/resources/bags/bag_1080x1080_04.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://xofarragio.com/resources/bags/bag_1080x1080_05.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://xofarragio.com/resources/bags/bag_1080x1080_06.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://xofarragio.com/resources/bags/bag_1080x1080_07.png" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>
<br>

<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> 
  <span class="dot" onclick="currentSlide(5)"></span> 
  <span class="dot" onclick="currentSlide(6)"></span> 
  <span class="dot" onclick="currentSlide(7)"></span> 
</div>

My knowledge of how to manipulate the code is limited so other than removing the line of code that is the problem, I've not been able to figure it out.

Screenshot of problem

Solution

  • Define a scope to limit the reach of your rules. The ".active" class is common, so it might conflict with other elements on the site.

    For example:

    .slideshow-container .dot.active, .slideshow-container .dot:hover {
  background-color: #717171;
}

    Some tips: