DEV Community

Cover image for I'm Stuck With Few Lines Of Codes. I Need Help
ryanstewart844
ryanstewart844

Posted on

I'm Stuck With Few Lines Of Codes. I Need Help

Hey guys, I need assistance. I created this simple booking form website, but I'm having issues with aligning the slider images. The images are coming scattered.
Video link: https://youtube.com/shorts/a4-TE9yihd4?feature=share

SEE THE HTML, JavaScript, AND CSS CODE FOR THIS SECTION

**HTML**

<section id="home">
   <div class="slider">
      <img src="imgs/banner2.jpg" alt="Banner 1">
      <img src="imgs/banner2.jpg" alt="Banner 1">
      <img src="imgs/banner2.jpg" alt="Banner 1">
    </div>
  </section>
Enter fullscreen mode Exit fullscreen mode 
**CSS**
.slider-container {
  display: flex; 
  overflow-x: scroll;
  scroll-snap-type: x mandatory; 
}
.slider-image {
  flex: 0 0 100%; 
  scroll-snap-align: start; 
}


.slider-image img {
  width: 100%;
  position: inline;
  height: auto;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

// Function to change the slider image
function changeSliderImage() {
  images[currentImageIndex].classList.remove("active");
  currentImageIndex = (currentImageIndex + 1) % images.length;
  images[currentImageIndex].classList.add("active");
}

// Change the slider image every 3 seconds
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
danbailey profile image
Dan Bailey •

The classes (or lack thereof) in your HTML don't match your CSS, and your Javascript is incomplete.