slider workout 1 - ovaj radi samo neke stvari ne

timer samo ostao da se uradi

by Megi93

HTML

<div class="slider">
    <div class="rubber-indicator">
        <ol class="page-dots">
            <li data-id="img_0" class="dot current"></li>
            <li data-id="img_1" class="dot"></li>
            <li data-id="img_2" class="dot"></li>
            <li data-id="img_3" class="dot"></li>
        </ol>
    </div>
    <img id="img_0" src="https://pbs.twimg.com/profile_images/763445868150329344/QVR6N2l_.jpg" class="img show">
    <img id="img_1" src="https://1.bp.blogspot.com/-O04oMX7-qC0/Uci6tIoqZcI/AAAAAAAAViU/W8ZmV9N5wcY/s640/Lefkada+Greece+9.jpg" class="img">
    <img id="img_2" src="https://www.greeka.com/members/user_images/netfalls/lefkada-location-kathisma-144839.jpg" class="img">
    <img id="img_3" src="https://www.lefkada-nefeli.gr/images/beaches/kathisma.jpg" class="img">
    <button id="previous" class="controls btn-left">&#9664;</button>
    <button id="next" class="controls btn-right">&#9654;</button>
</div>

CSS

.slider {
    margin-top: 15px;
    width: 100%;
    height: 500px;
    border: 5px solid cadetblue;
    position: relative;
    overflow: hidden;
}

.slider img {
    display: none;
    width: 100%;
    height: 500px;
    position: absolute;
}

.slider .btn-left {
    position: absolute;
    top: 250px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: transparent;
    border: 4px solid cadetblue;
    color: cadetblue;
    font-size: 25px;
    margin-left: 10px;
    font-weight: bold;
    z-index: 10;
    outline: none;
    cursor: pointer;
}

.slider .btn-right {
    position: relative;
    float: right;
    top: 250px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: transparent;
    border: 4px solid cadetblue;
    color: cadetblue;
    font-size: 25px;
    margin-right: 15px;
    font-weight: bold;
    z-index: 10;
    outline: none;
    cursor: pointer;
}

.rubber-indicator {
    width: 100%;
}

.page-dots {
    background-color: transparent;
    border: 2px solid cadetblue;
    list-style: none;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 40px;
    position: absolute;
    z-index: 2;
    width: 100%;
    max-width: 190px;
    text-align: center;
    top: 475px;
    left: 50%;
    transform: translateY(-100%) translateX(-50%);
    outline: none;
}

.page-dots .dot {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: cadetblue;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all .4s cubic-bezier(.3, 0, 0, 1.3);
}

.page-dots .current {
    background: cadetblue;
    position: relative;
    transform: scale(2);
    border-color: steelblue;
}

.hide {
    //opacity: 0;
    display: none;
    transition: all 0.5s ease;
    z-index: 0;
}

.img.show {
    opacity: 1;
    z-index: 1;
    display: block;
}

JavaScript

(function() {
    var images = document.querySelectorAll(".slider .img");
    var prev = document.querySelector("#previous");
    var next = document.querySelector("#next");
    var dots = document.querySelectorAll(".dot")
    var currentSlide = 0;

    next.onclick = function() {
        goToNext();
    }

    prev.onclick = function() {
        goToPrev();
    }

    setInterval(function() {
        goToNext();
    }, 2000)

    function goToPrev() {
        if (currentSlide == 0) {
            currentSlide = images.length - 1;
        } else {
            currentSlide--;
        }

        // Hide and show currentSlide image
        document.querySelector("img.show").classList.remove("show");
        images[currentSlide].classList.add("show");

        // Hide and show currentSlide image
        document.querySelector(".dot.current").classList.remove("current");
        dots[currentSlide].classList.add("current");
    }

    function goToNext() {
        if (currentSlide == images.length - 1) {
            currentSlide = 0;
        } else {
            currentSlide++;
        }

        // Hide current image and show Next one
        document.querySelector("img.show").classList.remove("show");
        images[currentSlide].classList.add("show");

        // Hide current dot and show next one
        document.querySelector(".dot.current").classList.remove("current");
        dots[currentSlide].classList.add("current");
    }

}());