• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Slideshow Gallery


New Coder

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.

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

* {
  box-sizing: border-box;

img {
  vertical-align: middle;

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  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;

.demo:hover {
  opacity: 1;

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

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

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

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

let slideIndex = 1;

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;
Top Bottom