POKUSAJ

brisi

by Megi93

HTML

<div class="slider">
    <div class="rubber-indicator">
        <ol class="page-dots">
            <li class="dot current"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ol>
    </div>
    <img id="img_1" src="http://www.saintthomasvillage.gr/blog/wp-content/uploads/2014/06/lefkada-beaches.jpg" class="img show">
    <img id="img_2" src="http://1.bp.blogspot.com/-O04oMX7-qC0/Uci6tIoqZcI/AAAAAAAAViU/W8ZmV9N5wcY/s640/Lefkada+Greece+9.jpg" class="img">
    <img id="img_3" src="http://www.greeka.com/members/user_images/netfalls/lefkada-location-kathisma-144839.jpg" class="img">
    <img id="img_4" src="http://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 slider = document.querySelector(".slider");
    var images = slider.querySelectorAll(".img");
    var dots = slider.querySelectorAll(".dot");
    var controls = document.querySelectorAll(".controls");
    var previous = document.getElementById("previous");
    var next = document.getElementById("next");
    var currentSlide = 1;

    setInterval(function() {
        if (document.querySelector('img.show')) {
            document.querySelector('img.show').classList.remove('show');
        }
        document.querySelector('#img_' + currentSlide).classList.add('show');

        // if count is equal to image.length(4 slides) than it will start 
        // over, or keep up by increment by one
        if (currentSlide == images.length) {
            currentSlide = 1;
        } else {
            currentSlide++;
        }
    }, 4000);

    for (var i = 0; i < dots.length; i++) {
        dots[i].onclick = function() {
            if (document.querySelector(".dot.current")) {
                document.querySelector(".dot.current").classList.remove("current");
                document.querySelector(".dot").classList.add("current");
                document.querySelector('#img_' + currentSlide).classList.add('show');
            }
            document.querySelector(".dot").classList.remove("current");
            this.classList.add("current");
            document.querySelector('img.show').classList.remove('show');
        }
    }

    for (var i = 0; i < controls.length; i++) {
        controls[i].onclick = function() {
            if (document.querySelector("#previous")) {
                document.querySelector("#previous");
            }
            document.querySelector("#next");
        }
    }

}());