Home > Net >  Problems at creating slider, I'm new in javascript
Problems at creating slider, I'm new in javascript

Time：07-17

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 >
        <button  style="left: 30px;" onclick="side_button(-1)"><i  style="font-size: 30px; color: #ffffff;"></i></button>
        <div >
            <div ><a href="#"><img src="img/Slider/BannerStore1.jpg"></div></a>
            <div ><a href="#"><img src="img/Slider/BannerStore2.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore3.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore4.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore5.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore6.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore7.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore8.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore9.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore10.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore11.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore12.jpg"></a></div>    
        </div>
        <button  style="right: 30px;" onclick="side_button(1)"><i  style="font-size: 30px; color: #ffffff;"></i></button>
        <ul >
            <li><button  onclick="button_selector(1)" type="button" ></button></li>
            <li><button  onclick="button_selector(2)" type="button" ></button></li>
            <li><button  onclick="button_selector(3)" type="button" ></button></li>
            <li><button  onclick="button_selector(4)" type="button" ></button></li>
            <li><button  onclick="button_selector(5)" type="button" ></button></li>
            <li><button  onclick="button_selector(6)" type="button" ></button></li>
            <li><button  onclick="button_selector(7)" type="button" ></button></li>
            <li><button  onclick="button_selector(8)" type="button" ></button></li>
            <li><button  onclick="button_selector(9)" type="button" ></button></li>
            <li><button  onclick="button_selector(10)" type="button" ></button></li>
            <li><button  onclick="button_selector(11)" type="button" ></button></li>
            <li><button  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.

CodePudding user response：

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 >
  <button  style="left: 30px;"><i 
                style="font-size: 30px; color: #ffffff;"></i></button>
  <div >
    <div ><img src="img/Slider/BannerStore1.jpg"></div>
    <div ><img src="img/Slider/BannerStore2.jpg"></div>
    <div ><img src="img/Slider/BannerStore3.jpg"></div>
    <div ><img src="img/Slider/BannerStore4.jpg"></div>
    <div ><img src="img/Slider/BannerStore5.jpg"></div>
    <div ><img src="img/Slider/BannerStore6.jpg"></div>
    <div ><img src="img/Slider/BannerStore7.jpg"></div>
    <div ><img src="img/Slider/BannerStore8.jpg"></div>
  </div>
  <button  style="right: 30px;"><i 
                style="font-size: 30px; color: #ffffff;"></i></button>
  <ul >
    <li ></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>

CodePudding user response：

First of all you are not calling your timeo function which should start automatic sliding. Also, You need to use setInterval() instead of setTimeout() and pass correct parameters. Please have a look at the code:

let countvalue = 1;
function side_button(i){showImg(countvalue  = i);}
function button_selector(i){showImg(countvalue = i);}
function showImg(i){
    console.log('called', 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(){
    setInterval(function(){ showImg(countvalue  = 1) }, 2000);
    showImg(countvalue);
}
timeo();
*{
    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;
}
<!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 >
        <button  style="left: 30px;" onclick="side_button(-1)"><i  style="font-size: 30px; color: #ffffff;"></i></button>
        <div >
            <div ><a href="#"><img src="img/Slider/BannerStore1.jpg"></div></a>
            <div ><a href="#"><img src="img/Slider/BannerStore2.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore3.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore4.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore5.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore6.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore7.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore8.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore9.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore10.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore11.jpg"></a></div>
            <div ><a href="#"><img src="img/Slider/BannerStore12.jpg"></a></div>    
        </div>
        <button  style="right: 30px;" onclick="side_button(1)"><i  style="font-size: 30px; color: #ffffff;"></i></button>
        <ul >
            <li><button  onclick="button_selector(1)" type="button" ></button></li>
            <li><button  onclick="button_selector(2)" type="button" ></button></li>
            <li><button  onclick="button_selector(3)" type="button" ></button></li>
            <li><button  onclick="button_selector(4)" type="button" ></button></li>
            <li><button  onclick="button_selector(5)" type="button" ></button></li>
            <li><button  onclick="button_selector(6)" type="button" ></button></li>
            <li><button  onclick="button_selector(7)" type="button" ></button></li>
            <li><button  onclick="button_selector(8)" type="button" ></button></li>
            <li><button  onclick="button_selector(9)" type="button" ></button></li>
            <li><button  onclick="button_selector(10)" type="button" ></button></li>
            <li><button  onclick="button_selector(11)" type="button" ></button></li>
            <li><button  onclick="button_selector(12)" type="button" ></button></li>
        </ul>
    </div>
</body>
</html>

Page link：https//www.codepudding.com/net/478161.html

Prev:How to know when the map function ends?
Next:Placing an array in a key-value pair in the the high-level object with multiple values
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding