Diskuze: Nefunguje js slider

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Lubiikpupiik

Člen

Lubiikpupiik:17.11.2017 15:49

Zdravím. Prosím o radu. Snažím se udělat si slider jenom za použití čistého js, ale nějak se mi to nedaří.

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app.css">
    <script src="scripts.js"></script>
</head>

<body>
<div id="slider">
    <ul id="slideWrap">
        <li class="li show">
        </li>
        <li class="li"></li>
        <li class="li"></li>
        <li class="li"></li>
        <li class="li"></li>
    </ul>
    <a id="prev" href="#">&#8810;</a>
    <a id="next" href="#">&#8811;</a>
</div>
</body>

</html>

CSS:

body {
  margin: 10%; }

#slider {
  width: 100%;
  height: 250px; }

ul {
  width: 100%;
  height: auto;
  list-style: none; }
  ul li {
    width: 400px;
    height: 250px;
    padding: 0;
    position: absolute;
    opacity: 0; }
    ul li:nth-of-type(1) {
      background-color: #00A6ED; }
    ul li:nth-of-type(2) {
      background-color: #FFD966; }
    ul li:nth-of-type(3) {
      background-color: #F71735; }
    ul li:nth-of-type(4) {
      background-color: #89da59; }
    ul li:nth-of-type(5) {
      background-color: #9881F5; }

.show {
  opacity: 1; }

#prev, #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  background-color: #000;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 150ms ease;
  -o-transition: all 150ms ease;
  transition: all 150ms ease; }
  #prev:hover, #next:hover {
    background-color: rgba(0, 0, 0, 0.5);
    text-shadow: 0; }

#prev {
  left: 10px; }

#next {
  right: 10px; }

JS:

var sliderFunction = function () {
    var slider = document.getElementById("slider");
    var ul = document.getElementById("slideWrap");
    var li = document.getElementsByClassName("li");
    count = 0;
    var liCount = li.length;
    var next = document.getElementById("next");
    var prev = document.getElementById("prev");


    var nextSlide = function () {
        if (count < liCount) {
            li[count].className = "";
            count++;
            li[count].className = "show";
        }
        else if (count == liCount) {
            li[count].className = "";
            count = 0;
            li[count].className = "show";

        }
    };

    var prevSlide = function () {
            if (count > 1) {
                li[count].className = "";
                count = count - 1;
                li[count].className = "show";
            }
            else if (count == 1) {
                li[count].className = "";
                count = liCount;
                li[count].className = "show";
            }
    };

    next.addEventListener("click", function () {
        nextSlide();
    });

    prev.addEventListener("click", function () {
        prevSlide();
    });

};

window.onload = sliderFunction();

Netušíte někdo, kde mám chybu? Konzole hlásí toto:

scripts.js:38 Uncaught TypeError: Cannot read property 'addEventListener' of null

at sliderFunction (scripts.js:38)
at scripts.js:48

Editováno 17.11.2017 15:51

Odpovědět

17.11.2017 15:49

Cobis

Člen

Cobis:17.11.2017 16:26

window.onload = sliderFunction();

Zavolá funkci hned v headu, když elementy next a prev neexistují.
Nahradit za toto

window.onload = sliderFunction;

a toto

var li = document.getElementsByClassName("li");

nahradit tímto

var li = document.getElementsByTagName("LI");

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

17.11.2017 16:26

Lubiikpupiik

Člen

Lubiikpupiik:17.11.2017 16:42

Funguje. Díky. :-)

Nahoru Odpovědět

17.11.2017 16:42

Cobis

Člen

Cobis:17.11.2017 16:53

Jestě bych doplnit:
CSS:

.hide {
        opacity: 0;
}

JS:

var nextSlide = function () {
        li[count].className = "hide";
        count++;
        if (li[count])
        {
            li[count].className = "show";
        }
        else
        {
            count = 0;
            li[count].className = "show";
        }
};

var prevSlide = function () {
        li[count].className = "hide";
        count--;
        if (li[count])
        {
            li[count].className = "show";
        }
        else
        {
            count = liCount - 1;
            li[count].className = "show";
        }
};

A nebo rovnou využít vlastností DOM elementů:

var sliderFunction = function () {
var slider = document.getElementById("slider");
var ul = document.getElementById("slideWrap");
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var currentLi = document.getElementsByClassName("show")[0];

var nextSlide = function () {

        currentLi.className = "hide";

        if (currentLi.nextElementSibling)
        {
                currentLi = currentLi.nextElementSibling;
        }
        else
        {
                currentLi = ul.firstElementChild;
        }
        currentLi.className = "show";
};

var prevSlide = function () {

        currentLi.className = "hide";

        if (currentLi.previousElementSibling)
        {
            currentLi = currentLi.previousElementSibling;
        }
        else
        {
            currentLi = ul.lastElementChild;
        }
        currentLi.className = "show";
};
        next.addEventListener("click", function () {
                nextSlide();
        });
        prev.addEventListener("click", function () {
                prevSlide();
        });
};

Nahoru Odpovědět

17.11.2017 16:53

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.

Nejčastěji vyhledáváné

Diskuze: Nefunguje js slider