Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Nefunguje js slider

Aktivity
Avatar
Lubiikpupiik
Člen
Avatar
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
Avatar
Cobis
Člen
Avatar
Odpovídá na Lubiikpupiik
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č
Řešení problému
 
Nahoru Odpovědět
17.11.2017 16:26
Avatar
Lubiikpupiik
Člen
Avatar
Lubiikpupiik:17.11.2017 16:42

Funguje. Díky. :-)

 
Nahoru Odpovědět
17.11.2017 16:42
Avatar
Cobis
Člen
Avatar
Odpovídá na Lubiikpupiik
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.