Slider Javascript with timer

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">
    <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 class="btn-left">&#9664;</button>
    <button class="btn-right">&#9654;</button>
</div>

CSS

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

.slider img {
    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 {
   
    display: block !important;
    transition: all 0.3s ease;
    z-index: 0;
}

.show {
    opacity: 1;
    z-index: 1;
}

JavaScript

var image = document.querySelector(".slider").querySelectorAll(".img");
var count = 1;
hideAll();

document.querySelector("#img_" + count).style.display = "block";

setInterval(function() {
    hideAll();
	
	if(count == image.length) {
		count = 1;
	} else {
		count++;
	}
	document.querySelector("#img_" + count).style.display = "block";
	
}, 3000);

function hideAll() {
    for (var i = 0; i < image.length; i++) {
        image[i].style.display = "none";
    }
}