HTML & CSS Slideshow Gallery

[Vaire]

Hello,

I'm trying to implement a slideshow gallery on my website, but I'm facing a couple of issues.
As of now, when I click on one of the three dots, the main img changes and the corresponding img highlights in the gallery row below. I would also like for all of the three dots to highlight both when hovering on one of them (which is working) and when one of them is selected as active (which is not).
Also, the image should change with a fading effect, which is not happening.

I'm new to website development and I've made several attempt to modify the JS, but I can't seem to make it work.

<style>
body {
  background-color: rgba(74, 35, 90, 0.4);
  font-family: Arial;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  max-width:100%;
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  padding-bottom:100%;
  display: inline;
}


/* Hide the images by default */
.mySlides {
  display: none;
 
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}


.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}
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 33.33%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
</style>

<!-- slideshow -->
  <div class="caption-container">
    <h2 style="text-align:center">Progetti</h2>
  </div>
  <br>
<div class="container">
  <div class="mySlides">
    
    <center><img src="/img/copertina854.png" style="width:max-width"></center>
  </div>

  <div class="mySlides">
    
    <center><img src="/img/dante2.PNG" style="max-width"></center>
  </div>

  <div class="mySlides">
    
    <center><img src="/img/cultura854.PNG" style="max-width"></center>
  </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>
</div>

<br>
  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="/img/copertina854.png" style="width:100%" onclick="currentSlide(1)" alt="Copertina">
    </div>
    <div class="column">
      <img class="demo cursor" src="/img/dante2.PNG" style="width:100%" onclick="currentSlide(2)" alt="Dante">
    </div>
    <div class="column">
      <img class="demo cursor" src="/img/cultura854.PNG" style="width:100%" onclick="currentSlide(3)" alt="Cultura in Pillole">
    </div>
  
  </div>
</div>

<script>
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("demo");
 let captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

 

[Illumerix]

Hello @Vaire . Could you maybe send a screen recording or screenshots of what the issue is as I'm having trouble understanding what you're trying to tell us here?