Rezorwar,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#container {
position: relative;
top: 20px;
width: 640px;
height: 480px;
margin: 0 auto;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, .5);
transition: all .6s;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#previous {
position: absolute;
left: 10px;
top: 50%;
margin-top: -20px;
opacity: .5;
cursor: pointer;
}
#previous:hover, #next:hover {
opacity: 1;
}
#previous:active {
margin-top: -18px;
}
#next:active {
margin-top: -18px;
}
#next {
position: absolute;
right: 10px;
top: 50%;
margin-top: -20px;
opacity: .3;
cursor: pointer;
}
.nav {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
margin-left: -50px;
}
.nav li {
float: left;
margin-right: 5px;
margin-bottom: 5px;
display: block;
height: 10px;
width: 10px;
border: 2px solid #fff;
border-radius: 50%;
}
.active {
background-color: red;
}
.up{
display: flex;
margin: 4px auto;
text-align: center;
justify-content: center;
background-color: #D3D3D3;
width: 300px;
border-radius: 8px;
}
.up li{
margin: 2px 5px;
cursor: pointer;
font-size: 1.1em;
text-transform: capitalize;
}
.up li.active{
color: #FFFFFF;
border-bottom: solid 1px #FFFFFF;
background-color: transparent;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
(function() {
var container = document.getElementById("container"),
button = document.getElementById("next"),
previous = document.getElementById("previous"),
array = ["http://mebelperemen.ru/image/data/praga%20moduli/2017-07-01_203711.jpg",
"https://remont-otdelka62.ru/wp-content/uploads/2014/06/otdelka_komnat_foto3.jpg",
"http://grazia-mebel.ru/upload/iblock/e9c/e9c73472cfcd3f3c6ffc4478bd07b546.jpg",
"https://domtexnik.com.ua/assets/uploads/store/products/80d7c-polotencesushitel-mario-dzhuno-01.jpg"],
text = ["кухня","комната","прихожая","туалет"],
navUp = document.querySelector(".up"),
sliderRulesUp = document.querySelectorAll(".up li"),
sliderRules = document.querySelectorAll(".nav li"),
old, i = 0,
j = sliderRules.length - 1,
imgSet = function(link) {
container.style.backgroundImage = "url(" + link + ")"
};
container.addEventListener("click", newX, false);
navUp.addEventListener("click", newX, false);
for (; j > -1; j--) {
var link = array[j];
var img = new Image;
img.src = link;
var sliderRule = sliderRules[j];
sliderRule.dataset.indx = j;
var sliderRuleUp =
sliderRulesUp[j];
sliderRuleUp.textContent = text[j];
sliderRuleUp.dataset.indx = j
}
sliderRule.classList.add("active");
sliderRuleUp.classList.add("active");
sliderRule.click();
function newX(e) {
var elem = e.target;
var i = +elem.dataset.indx;
if (isNaN(i)) return;
var next = i + 1;
next == array.length && (next = 0);
var prev = i - 1;
0 > prev && (prev = array.length - 1);
button.dataset.indx = next;
previous.dataset.indx = prev;
document.querySelector(".nav .active").classList.remove("active");
sliderRules[i].classList.add("active");
document.querySelector(".up .active").classList.remove("active");
sliderRulesUp[i].classList.add("active");
var link = array[i];
imgSet(link);
e.preventDefault()
}
})()
});
</script>
</head>
<body>
<ul class="up">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="container">
<img src="https://www.gentec-eo.com/Content/images/home/slider/left-arrow.png" id="previous" width="40" height="40" >
<img src="https://www.gentec-eo.com/Content/images/home/slider/right-arrow.png" id="next" width="40" height="40" >
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
