• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nie działający slider

VPS Starter Arubacloud
0 głosów
127 wizyt
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ź

+1 głos
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 :)

komentarz 22 grudnia 2017 przez bicnet Gaduła (4,800 p.)

Nie znasz jakiegoś dobrego poradnika na yt, żeby zrozumiał to wyżej co napisałeś? blush

Jakbyś mógł wyjaśnić te tablice, .forEach, () => ? laugh

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

Podobne pytania

+2 głosów
2 odpowiedzi 242 wizyt
0 głosów
0 odpowiedzi 125 wizyt
pytanie zadane 10 marca 2019 w JavaScript przez Sobol3k Użytkownik (690 p.)
0 głosów
1 odpowiedź 312 wizyt
pytanie zadane 8 lipca 2018 w JavaScript przez bicnet Gaduła (4,800 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...