What is wrong with my image slideshow? - Vanilla Javascript

Question

I've coded a simple image slideshow using Vanilla JS which unfortunately isn't working. It's structured in a 'section', within a 'container'. The overflow of the container is hidden, and there are relative 'span' circles below it which I want to use to control the slideshow.

Here is my code so far:

// Variables

let i;
let image = document.getElementsByClassName("image");
let slideIndex = 1;
let dots = document.getElementsByClassName("dots");


// Functions

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showImage(n) {
  if (n > image.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = image.length;
  }

  for (i = 0; i < image.length; i++) {
    image[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("active", "");
  }
  image[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active");
}

showImage(slideIndex);

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

.image-section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: #303960;
}

.image-container {
  height: 600px;
  width: 900px;
  overflow: hidden;
  background-color: #f9f9f9;
}

.image {
  height: 600px;
  width: 900px;
}

.image-controller {
  height: 10vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: #fff;
  margin: 0 10px;
  cursor: pointer;
}

.active {
  background-color: #f96d80;
}

I'm assuming it's a problem with my for loop, but I could be wrong. Any advice would be great!

Rickard Elim&#228;&#228; · Accepted Answer

Was this something you had in mind? You made the code a bit too complex.

I changed everything in your javascript code, because nothing really worked with all your different method names and how they were called. Thought it was easier for me to just type a few lines of code to show a different way of thinking.

Your images (it should be called "images", not "image" because there are several of them) and dots arrays start at position 0, so use that. Start by adding 0 as a parameter in your onclick method on your first dot element.

Then just keep track of the previous index (prevSelection) and remove the .active class from the previously selected image and dot, while adding .active to the newly selected image and dot. I added CSS style for .active for .image.

If you want to add a sliding animation, this is not the way to go, however.

// Variables

let images = document.getElementsByClassName("image");
let dots = document.getElementsByClassName("dots");

var prevSelection = 0;

function showSlides(slidePosition) {
  removeClass('active', prevSelection);
  addClass('active', slidePosition);
  
  prevSelection = slidePosition;
}

function removeClass(className, slidePosition) {
  dots  [slidePosition].classList.remove(className);
  images[slidePosition].classList.remove(className);
}

function addClass(className, slidePosition) {
  dots  [slidePosition].classList.add(className);
  images[slidePosition].classList.add(className);
}

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

.image-section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: #303960;
}

.image-container {
  height: 600px;
  width: 900px;
  overflow: hidden;
  background-color: #f9f9f9;
}

.image {
  display: none;
  height: 600px;
  width: 900px;
}

.image.active { /* added this */
  display: block;
}

.image-controller {
  height: 10vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: #fff;
  margin: 0 10px;
  cursor: pointer;
}

.dots.active { /* added .dots for better clarity */
  background-color: #f96d80;
}

What is wrong with my image slideshow? - Vanilla Javascript

Answers (1)

Related Questions