0

Сделал простой слайдер на 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>

2
  • Если работает - больше не трогай) Commented 11 февр. 2017 в 14:09
  • Такой слайдер можно и без JS сделать)) Commented 11 февр. 2017 в 14:32

1 ответ 1

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 или еще какой-либо цикл, который не умрет в одном из браузеров.

5
  • Я бы вместо forEach написал бы for. forEach на IE9 уже не работает
    – Yuri
    Commented 11 февр. 2017 в 14:36
  • @Yuri пусть он горит синим пламенем) Commented 11 февр. 2017 в 14:43
  • Если делать слайдер на css, то можно воспользоваться псевдо-классом checked для отображения начальной точки на слайдере и добавить анимацию с помощью transform. Да и анимацию можно положить в класс и сделать "открытие"(classList.add) класса при клике). Больше интересует логика работы слайдера) как ее можно было улучшить, например добавить переменную и ей бы присваивались значения текущего слайда и не пришлось бы использовать :checked))
    – John-n
    Commented 11 февр. 2017 в 15:34
  • @John-n как по мне это слиииииишком широко описывать разные моменты слайдера. Как я написал последним пунктом, проще взять 3-4 слайдера и посмотреть их устройство. Мозг в начале заступорится, но при этом что-то для себя прояснит Commented 11 февр. 2017 в 15:44
  • так и сделаю) спасибо за помощь
    – John-n
    Commented 11 февр. 2017 в 15:49

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.