Merl, вот так хотелось изначально ...
макет html и css, ссылки на реальные картинки, только без блока js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
}
.slider_wrap{
width: 80%;
max-width: 960px;
margin: 0 auto;
}
.slides{
position: relative;
padding-top: 360px;
}
.slides img{
position: absolute;
top: 0;
left: 0;
opacity:0;
transition: opacity 1.25s;
}
.slides input[type="radio"]{
display: none;
}
.slides input[type="radio"]:checked + img{
opacity: 1;
}
.slider_control{
width: 100%;
margin-top: 15px;
text-align: center;
}
.slider_control label{
display: inline-block;
width: 100px;
height: 100px;
background-size: cover;
background-repeat: no-repeat;
margin: 10px ;
}
.slider_control label:first-of-type{
background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage4.jpg);
}
.slider_control label:nth-of-type(2){
background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage6.jpg);
}
.slider_control label:last-of-type{
background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage7.jpg);
}
.prev,
.next{
display: inline-block;
padding: 5px 10px;
background: #000;
color: #fff;
vertical-align: middle;
cursor: pointer;
}
.prev:active,
.next:active{
background: #666;
}
.border{
outline: 2px solid green;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".slider_wrap"), function(item) {
var btn_prev = item.querySelector(".prev");
var btn_next = item.querySelector(".next");
var labels = item.querySelectorAll("label");
var len = labels.length - 1;
var i = 0;
function cleanout() {
labels[i].classList.remove("border")
}
function addcls() {
labels[i].classList.add("border")
}
function limit() {
i < 0 && (i = len);
i > len && (i = 0)
}
btn_prev.addEventListener("click", function() {
cleanout();
i--;
limit();
labels[i].click();
});
btn_next.addEventListener("click", function() {
cleanout();
i++;
limit();
labels[i].click();
});
[].forEach.call(labels, function(label, k) {
label.addEventListener("click", function() {
cleanout();
i = k;
addcls()
})
})
})
});
</script>
</head>
<body>
<div class="slider_wrap">
<div class="slides">
<input type="radio" name="slide" id="slide1" checked>
<img src="https://github.com/MerlKori/slider/raw/master/images/fullimage4.jpg" alt="foto">
<input type="radio" name="slide" id="slide2">
<img src="https://github.com/MerlKori/slider/raw/master/images/fullimage6.jpg" alt="foto">
<input type="radio" name="slide" id="slide3">
<img src="https://github.com/MerlKori/slider/raw/master/images/fullimage7.jpg" alt="foto">
</div>
<div class="slider_control">
<div class="prev">предыдущий</div>
<label for="slide1" class="border"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<div class="next">следующий</div>
</div>
</div>
</body>
</html>