Nie działający slider

pytanie zadane 22 grudnia 2017 w JavaScript przez bicnet Gaduła (4,800 p.)

Witam,

próbowałem zrobić slider z 4 obrazkami i 4 kropkami na dole (bez żadnych poradników), jestem bardzo początkujący w JS, dlatego próbowałem to robić z wiedzą, która posiadam. Co prawda kropki działają (prócz ostatniej nie wiem czemu) i zdjęcia się przełączają tak jak ma być, ale nie potrafię zrobić, żeby obrazki się same zmieniały i strzałki, które chciałbym mieć po boku (next-slide, prev-slide).

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Slider</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
      <div class="slider-box">
             <div class="slider-content">
                    <div class="slider-img1"><img src="img/bear.jpg" alt=""></div>
                    <div class="slider-img2"><img src="img/cat.jpg" alt=""></div>
                    <div class="slider-img3"><img src="img/dog.jpg" alt=""></div>
                    <div class="slider-img4"><img src="img/ladybird.jpg" alt=""></div>
             </div>

           <div class="slider-panel-control">
                 <div class="control-dots" id = "dot1"></div>
                 <div class="control-dots" id = "dot2"></div>
                 <div class="control-dots" id = "dot3"></div>
                 <div class="control-dots" id = "dot4"></div>
           </div>
    </div>


<script src="slider.js"></script>

</body>
</html>

*
{
  box-sizing: border-box;
}

body
{
  margin: 0;
  padding: 0;
}

.slider-box
{
  width: 800px;
  height: 450px;
  display: block;
   margin: 300px auto;
   position: relative;
   border: 1px solid black;
   display: flex;

   .slider-content
   {
         img
         {
            display: none;
            width: 798px;
            height: 448px;
            transition: 1s linear;
         }
   }

   .slider-panel-control
   {
     width: 300px;
     position: absolute;
     bottom: 30px;
     left: 280px;
     display: flex;

         .control-dots
         {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 1px solid black;
            margin: 20px;
            cursor: pointer;
            flex-direction: row;
            transition: 0.75s linear;
         }
   }
}

.active-dots
{
  background: orange;
}

* {
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0; }

.slider-box {
  width: 800px;
  height: 450px;
  display: block;
  margin: 300px auto;
  position: relative;
  border: 1px solid black;
  display: flex; }
  .slider-box .slider-content img {
    display: none;
    width: 798px;
    height: 448px;
    transition: 1s linear; }
  .slider-box .slider-panel-control {
    width: 300px;
    position: absolute;
    bottom: 30px;
    left: 280px;
    display: flex; }
    .slider-box .slider-panel-control .control-dots {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 1px solid black;
      margin: 20px;
      cursor: pointer;
      flex-direction: row;
      transition: 0.75s linear; }

.active-dots {
  background: orange; }

const firstImg = document.querySelector(".slider-img1 img");
const secondImg = document.querySelector(".slider-img2 img");
const thirdImg = document.querySelector(".slider-img3 img");
const fourthImg = document.querySelector(".slider-img4 img");

const firstDot = document.querySelector("#dot1");
const secondDot = document.querySelector("#dot2");
const thirdDot = document.querySelector("#dot3");
const fourthDot = document.querySelector("#dot4");

document.addEventListener("DOMContentLoaded", function()
{

firstDot.addEventListener("click", function()
{
  this.classList.add("active-dots");
  secondDot.classList.remove("active-dots");
  thirdDot.classList.remove("active-dots");
  fourthDot.classList.remove("acitve-dots");

  firstImg.style.display = "block";
  secondImg.style.display ="none";
  thirdImg.style.display = "none";
  fourthImg.style.display = "none";
});


secondDot.addEventListener("click", function()
{
  this.classList.add("active-dots");
  firstDot.classList.remove("active-dots");
  thirdDot.classList.remove("active-dots");
  fourthDot.classList.remove("acitve-dots");

  firstImg.style.display = "none";
  secondImg.style.display ="block";
  thirdImg.style.display = "none";
  fourthImg.style.display = "none";
});

thirdDot.addEventListener("click", function()
{
  this.classList.add("active-dots");
  firstDot.classList.remove("active-dots");
  secondDot.classList.remove("active-dots");
  fourthDot.classList.remove("acitve-dots");

  firstImg.style.display = "none";
  secondImg.style.display ="none";
  thirdImg.style.display = "block";
  fourthImg.style.display = "none";
});

fourthDot.addEventListener("click", function()
{
  this.classList.add("active-dots");
  firstDot.classList.remove("active-dots");
  thirdDot.classList.remove("active-dots");
  secondDot.classList.remove("acitve-dots");

  firstImg.style.display = "none";
  secondImg.style.display ="none";
  thirdImg.style.display = "none";
  fourthImg.style.display = "block";
});

});

Z góry dziękuję za pomoc.

1 odpowiedź

odpowiedź 22 grudnia 2017 przez zgrybus Pasjonat (24,860 p.)

zamiast tworzyć każdą zmienną w kodzie do poszczególnych elementów - zrób tablice przez querySelectorAll :)

Zamiast używać add / remove - możesz użyć toggle dla poszczególnych zmiennych w tablicy. Mała wskazówka ( zamiast używaćklas .slider-img-1/2/3/4, będę używał .slider-block).

const sliderItems = [...document.querySelectorAll('div.slider-block')]; // transform na tablice

sliderItems.forEach((item, index) => { // pęlte po tablicy // pierwszy arg to aktualny item a nastepny to index 
   item.addEventListener('click', () => {
      // tutaj działasz na klasach / dodajesz usuwasz etc
   });
});

Miłego kodzenia :)