Skip to content
Advertisement

Problems at creating slider, I’m new in javascript

I’m trying to create an automatic slider, I can go through the images using the buttons to change them, but them don’t change automatically and I don’t know why, also the first end button doesn’t work properly at the beginning of the slider.

This is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/estilos.css"/>
    <script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script>
    <script src="js/Script1.js" ></script>
    <title>Slider exercise </title>
</head>
<body>
    <div class="slider-banners">
        <button class="slider-button_left" style="left: 30px;" onclick="side_button(-1)"><i class="fa-solid fa-angle-left" style="font-size: 30px; color: #ffffff;"></i></button>
        <div class="sliderbox">
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore1.jpg"></div></a>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore2.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore3.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore4.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore5.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore6.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore7.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore8.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore9.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore10.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore11.jpg"></a></div>
            <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore12.jpg"></a></div>    
        </div>
        <button class="slider-button_right" style="right: 30px;" onclick="side_button(1)"><i class="fa-solid fa-angle-right" style="font-size: 30px; color: #ffffff;"></i></button>
        <ul class="slider-selectors_buttons">
            <li><button class="dissable-s" onclick="button_selector(1)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(2)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(3)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(4)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(5)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(6)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(7)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(8)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(9)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(10)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(11)" type="button" ></button></li>
            <li><button class="dissable-s" onclick="button_selector(12)" type="button" ></button></li>
        </ul>
    </div>
</body>
</html>

This is the CSS code:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Times New Roman', Times, serif;
    background-color: #4d4d4d;
    margin: 0;
    padding: 0;
}
.slider-banners{
    display: flex;
    height: auto;
    width: 100%;
    position: relative;
}

.sliderbox{
    height: 380px;
    width: 100%;
    display: flex;
    overflow: hidden;
}

.sliderbox_image{
    display: flex;
    height: auto;
    width: 100%;
}

.slider_image img{
    width: 100%;
    height: auto;
}

.slider-button_left, .slider-button_right{
    position: absolute;
    display: block;
    padding: 8px;
    background-color: #66323129;
    align-self: center;
    border: none;
    border-radius: 5px;
    transition: 0.4s ease;
}

.slider-button_left:hover, .slider-button_right:hover{
    background-color: #663231f0;
    transform: translateX(2px);
    padding: 10px;
}

.slider-selectors_buttons{
    display: flex;
    width: 100%;
    position: absolute;
    list-style: none;
    bottom:0;
    justify-content: center;
}

.dissable-s{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 15px 5px;
    cursor: pointer;
    background-color: #66323129;
    border-color: #000000a0;
}

.dissable-s:hover{
    background-color: #663231f0;
    border-color: #000000cb;
}

.active-s{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 15px 5px;
    cursor: pointer;
    background-color: #F47B3E;
    border-color: #000000cb;
}

And this is the JavaScript code:

let countvalue = 1;
function side_button(i){showImg(countvalue += i);}
function button_selector(i){showImg(countvalue = i);}
function showImg(i){
    let n;
    const img = document.querySelectorAll('.sliderbox img');
    const buttons = document.querySelectorAll('.slider-selectors_buttons button');
    if(i < 1){countvalue = img.length}
    if(i > img.length){countvalue = 1}
    for(n = 0; n < img.length; n++){
        img[n].style.display = "none";
    }
    for(n = 0; n < buttons.length; n++){
        buttons[n].className = buttons[n].className.replace("active-s", "dissable-s");
    }
    img[countvalue - 1].style.display = "block";
    buttons[countvalue - 1].className = "active-s";
}
function timeo(countvalue){
    setTimeout(showImg, 200);
    showImg(countvalue);
}

I appreciate any help or advice you can give me in order to solve this problem.

Advertisement

Answer

I made a lot of change for you code html css and javascript

I hope this help you and this what you need.

let sliderBanners = document.querySelector(".slider-banners"),
  dots = document.querySelectorAll(".slider-selectors_buttons li"),
  sliderContent = document.querySelectorAll(".slider-banners .sliderbox_image"),
  leftArrow = document.querySelector(".slider-button_left"),
  rightArrow = document.querySelector(".slider-button_right"),
  sliderSpeed = 4500,
  currentSlide = 0,
  currentActive = 0,
  sliderTimer;
console.log(leftArrow);
window.onload = function() {
  function playSlide(slide) {
    for (let i = 0; i < dots.length; i++) {
      sliderContent[i].classList.remove("active");
      sliderContent[i].classList.remove("inactive");
      dots[i].classList.remove("active");
    }
    if (slide < 0) {
      slide = currentSlide = sliderContent.length - 1;
    }
    if (slide > sliderContent.length - 1) {
      slide = currentSlide = 0;
    }
    if (currentActive != currentSlide) {
      sliderContent[currentActive].classList.add("inactive");
    }
    sliderContent[slide].classList.add("active");
    dots[slide].classList.add("active");
    currentActive = currentSlide;

    clearTimeout(sliderTimer);
    sliderTimer = setTimeout(function() {
      playSlide((currentSlide += 1));
    }, sliderSpeed);
  }
  leftArrow.addEventListener("click", () => {
    playSlide((currentSlide -= 1));
  });
  rightArrow.addEventListener("click", () => {
    playSlide((currentSlide += 1));
  });
  for (let j = 0; j < dots.length; j++) {
    dots[j].addEventListener("click", () => {
      playSlide((currentSlide = dots.indexOf(this)));
    });
  }
  playSlide(currentSlide);
};
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Times New Roman", Times, serif;
  background-color: #4d4d4d;
  margin: 0;
  padding: 0;
}

.slider-banners {
  display: flex;
  justify-content: center;
  height: auto;
  width: 100%;
  position: relative;
}

.sliderbox {
  position: relative;
  height: 380px;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.sliderbox_image {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  opacity: 0;
}

.sliderbox_image.inactive {
  opacity: 1;
}

.sliderbox_image.active {
  opacity: 1;
  position: relative;
}

.slider_image img {
  width: 100%;
  height: auto;
  text-align: center;
}

.slider-button_left,
.slider-button_right {
  position: absolute;
  display: block;
  padding: 8px;
  background-color: #66323129;
  align-self: center;
  border: none;
  border-radius: 5px;
  transition: 0.4s ease;
  z-index: 1000;
  cursor: pointer;
}

.slider-button_left:hover,
.slider-button_right:hover {
  background-color: #663231f0;
  transform: translateX(2px);
  padding: 10px;
}

.slider-selectors_buttons {
  display: flex;
  width: 100%;
  position: absolute;
  list-style: none;
  bottom: -30px;
  justify-content: space-evenly;
}

.slider-selectors_buttons li {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid black;
}

.slider-selectors_buttons li.active {
  background-color: black;
}

.dissable-s {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 15px 5px;
  cursor: pointer;
  background-color: #66323129;
  border-color: #000000a0;
}

.dissable-s:hover {
  background-color: #663231f0;
  border-color: #000000cb;
}

.active-s {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 15px 5px;
  cursor: pointer;
  background-color: #f47b3e;
  border-color: #000000cb;
}
<div class="slider-banners">
  <button class="slider-button_left" style="left: 30px;"><i class="fa-solid fa-angle-left"
                style="font-size: 30px; color: #ffffff;"></i></button>
  <div class="sliderbox">
    <div class="sliderbox_image active"><img src="img/Slider/BannerStore1.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore2.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore3.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore4.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore5.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore6.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore7.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore8.jpg"></div>
  </div>
  <button class="slider-button_right" style="right: 30px;"><i class="fa-solid fa-angle-right"
                style="font-size: 30px; color: #ffffff;"></i></button>
  <ul class="slider-selectors_buttons">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script>
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement