Задать вопрос
@mardari98
javascript

Как сделать чтобы слайдер работал правильно?

https://jsfiddle.net/ef3tzokm/5/

Есть такой слайдер. Криво перенёс в JSFiddle, но не в этом суть. Проблемы две. Вернее 1 проблема и 1 вопрос:
1) Почему стиль transition-duration работает только со второго нажатия по кнопке влево/вправо? Пробовал и в JS пихать, результат тот же.

2) Как сделать так, чтобы слайдер не нажимался, когда в области показа первые 3 или последние 3 категории? Или зациклить (лучше так). Если бы в области показа была бы только одна карточка за раз, было бы просто, но у меня показываются по 3, остальные спрятаны за областью показа. Может есть метод получше?
  • Вопрос задан
  • 168 просмотров
9 комментариев
Подписаться 1 Простой 9 комментариев
Решения вопроса 1
@fixeri
1) Почему стиль transition-duration работает только со второго нажатия по кнопке влево/вправо? Пробовал и в JS пихать, результат тот же. - потому что в стилях не установили значение left: 0;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		
		#wrap
		{
		  width: 150px;
		}
		#categories
		{
			justify-content: center;
			align-items: center;
			display: flex;
			box-shadow: 0px 5px 13px -6px rgba(0,0,0,0.75);
			background-color: #fff;
			height: 190px;
		}
		#categories .wrap
		{
			margin: 0;
			display: flex;
			overflow: hidden;
			justify-content: space-between;
		}

		.leftArrow,.rightArrow
		{
			height: 88px;
			display: block;
			padding: 51px 0;
			cursor: pointer;
		}
		.arrow
		{
			min-width: 32px;
			max-width: 100%;
			color: red;
		}
		.leftArrow:hover
		{
			position: relative;
			right: 10px;
		}
		.rightArrow:hover
		{
			position: relative;
			right: -10px;
		}
		.toLeft
		{
			right: 345px;	
			transition-duration: .25s;
			transition: right 1s ease-out 0.5s;
		}
		.categoryItem
		{
			width: 345px;
			position: relative;
			padding: 5px;
			display: flex;
			align-items: center;
			border-right: 1px solid #e7e7e7;
			transition: left 0.5s;
		  	left: 0;
		}

		.categoryItem img
		{
			width: 170px;
			height: auto;
			margin-left: 24px;
		}
		.productInfo
		{
			font-family: 'Bebas Neue', cursive;
			margin-left: 5px;
		}
		.productInfo .title
		{
			font-size: 27px;
			text-transform: uppercase;
			width: 110px;
			line-height: 0.9;
			color: #afafaf;
			margin-bottom: 20px;
		}
		.goToShop button
		{
			background-color: #3cc395;
			border: none;
			font-size: 19px;
			font-weight: bold;
			font-family: 'Bebas Neue', cursive;
			color: #fff;
			padding: 9px 16px;
			border-radius: 3px;
			box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.75);
		}
		.goToShop button:hover
		{
			box-shadow: none;
			position: relative;
			top: 3px;
		}
	</style>
</head>
<body>
	<div id="categories">
		<div class="arrow" id="left"><img src="https://png.pngtree.com/png-clipart/20190920/original/pngtree-left-and-right-arrow-icons-png-image_4636456.jpg" alt="" class="leftArrow"></div>
		<div class="wrap">
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			<div class="categoryItem">
				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
				<div class="productInfo">
					<div class="title">branded shoes</div>
					<div class="goToShop">
						<button>SHOP</button>
					</div>
				</div>
			</div>
			
		</div>
		<div class="arrow" id="right"><img src="https://png.pngtree.com/png-clipart/20190920/original/pngtree-left-and-right-arrow-icons-png-image_4636456.jpg" alt="" class="rightArrow"></div>

	</div>

	<script type="text/javascript">
		"use strict";

		var left = document.querySelector("#left");
		var right = document.querySelector("#right");
		var elements = document.getElementsByClassName("categoryItem");
		var pos = 0;
		let coords = elements[0].getBoundingClientRect().width;
		let max = Math.floor((elements.length * coords) / 2);


		left.onclick = function()
		{
			if (pos >= 0) return;
			pos += coords;
			for (var i = 0; i < elements.length; i++)
			{	
				elements[i].style.left = pos+'px';
			}
		};

		right.onclick = function()
		{
			if (pos <= -max) return;
			pos -= coords;
			for (var i = 0; i < elements.length; i++)
			{
				elements[i].style.left = pos+'px';	
			}
		};
	</script>
</body>
</html>
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Создание короткого видео
10 мая 2024, в 03:40
1500 руб./за проект
Набор заданий по OpenGL
10 мая 2024, в 03:02
5000 руб./за проект
Помощь в разработке amoCRM webhook
10 мая 2024, в 02:29
300 руб./за проект
Ещё заказы