Как лучше сделать слайдер?

341

12 февраля 2017, 12:54

Сделал простой слайдер на js. Пока только учусь и многого не знаю, так что реализация оставляет желать лучшего) как лучше его доделать?

var btn1 = document.querySelector(".rad1"); 
var btn2 = document.querySelector(".rad2"); 
var btn3 = document.querySelector(".rad3"); 
var one = document.querySelector(".yellow"); 
var two = document.querySelector(".green"); 
var three = document.querySelector(".red"); 
 
btn1.addEventListener("click", function(event) { 
	one.classList.add("block-item-show"); 
	two.classList.remove("block-item-show"); 
	three.classList.remove("block-item-show"); 
}) 
 
btn2.addEventListener("click", function(event) { 
	two.classList.add("block-item-show"); 
	one.classList.remove("block-item-show"); 
	three.classList.remove("block-item-show"); 
}) 
 
btn3.addEventListener("click", function(event) { 
	three.classList.add("block-item-show"); 
	one.classList.remove("block-item-show"); 
	two.classList.remove("block-item-show"); 
})

html, 
body { 
	margin: 0; 
	padding: 0; 
} 
 
.block { 
	position: relative; 
	width: 600px; 
	height: 300px; 
	margin: 0 auto; 
	background-color: skyblue; 
	border: 2px solid #eee; 
} 
 
.block-item { 
	display: none; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 600px; 
	height: 300px; 
} 
 
.block-item-show { 
	display: block; 
} 
 
.yellow { 
	background-color: yellow; 
} 
 
.green { 
	background-color: green; 
} 
 
.red { 
	background-color: red; 
} 
 
.rad1, 
.rad2, 
.rad3 { 
	position: absolute; 
	left: 50%; 
	bottom: 10px; 
	z-index: 2; 
	margin-left: -50px; 
} 
 
.rad2 { 
	margin-left: -30px; 
} 
 
.rad3 { 
	margin-left: -10px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Test</title> 
	<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
	<div class="block"> 
		<div class="block-item yellow"></div> 
		<div class="block-item green"></div> 
		<div class="block-item red"></div> 
		<input class="rad1" type="radio" name="group"> 
		<input class="rad2" type="radio" name="group"> 
		<input class="rad3" type="radio" name="group"> 
	</div> 
	<script src="main.js"></script> 
</body> 
</html>

Answer 1

На сырую получилось как-то так:

var photos = document.querySelectorAll(".block-item"); 
var btns = document.querySelectorAll("input[type=radio]"); 
 
btns.forEach(function(item, idx) { 
  item.addEventListener('click', function() { 
    photos.forEach(function(el) { 
      el.classList.remove("block-item-show"); 
    }); 
    photos[idx].classList.add("block-item-show"); 
  }); 
});

html, 
body { 
	margin: 0; 
	padding: 0; 
} 
 
.block { 
	position: relative; 
	width: 600px; 
	height: 300px; 
	margin: 0 auto; 
	background-color: skyblue; 
	border: 2px solid #eee; 
} 
 
.block-item { 
	display: none; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 600px; 
	height: 300px; 
} 
 
.block-item-show { 
	display: block; 
} 
 
.yellow { 
	background-color: yellow; 
} 
 
.green { 
	background-color: green; 
} 
 
.red { 
	background-color: red; 
} 
 
.rad1, 
.rad2, 
.rad3 { 
	position: absolute; 
	left: 50%; 
	bottom: 10px; 
	z-index: 2; 
	margin-left: -50px; 
} 
 
.rad2 { 
	margin-left: -30px; 
} 
 
.rad3 { 
	margin-left: -10px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Test</title> 
	<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
	<div class="block"> 
		<div class="block-item yellow"></div> 
		<div class="block-item green"></div> 
		<div class="block-item red"></div> 
		<input class="rad1" type="radio" name="group"> 
		<input class="rad2" type="radio" name="group"> 
		<input class="rad3" type="radio" name="group"> 
	</div> 
	<script src="main.js"></script> 
</body> 
</html>

Наверняка сделать можно еще лучше

Но вообще, такой "слайдер" можно сделать и без JS. Ибо это на слайдер совсем не похоже.

Визуально, минимум:

Точки изначально при загрузке не хватает на одном из кругляшков
Слайдер на то и слайдер, чтоб менялся слайдом чтоли или каким-то эффектом. Его сейчас нет.
Если это для людей слайдер с возможностью тыкать - то должны быть и стрелки для удобства
Блок radio и блок с фото надо обернуть в отдельные div'ы, чтоб можно было позиционировать блоками
Слайдер обычно заводится на таймер по которому меняются фото сами
Ну а если добавится таймер или стрелки для перелистывания, то придется доделывать еще логику когда фото дойдет до крайнего правого или левого и перелистнется еще раз
Кмк, лучше открыть популярные слайдеры и посмотреть как там внутри написано. Просто для знаний.

P.S. Как говорят в комментарии: IE как обычно впереди планеты всей, поэтому forEach лучше заменить на for или еще какой-либо цикл, который не умрет в одном из браузеров.