Форум

bublik787 · #1 (**permalink**) 20.05.2020, 20:50

Делаю сайт на flexbox.

Код:

<div class="headerSliderContainer">
	<p>ПОПУЛЯРНЫЕ ТОВАРЫ</p>
</div>
		




		<div class="sliderContainer">

			<button id="buttonTopMenuLeft" class="buttonTopMenuLeft"></button>
			<div id="slider" class="slider">
				<div id="slider2" class="slider2">
					
					<div id="slide" class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>
					
					<div class="slide">
						<img src="#" alt="">
						<div class="productName"></div>
						<button class="buy">В КОРЗИНУ</button>

					</div>

				</div><!-- slider2 -->
			</div><!-- slider -->
			<button id="buttonTopMenuRight" class="buttonTopMenuRight"></button>
		</div><!-- sliderContainer -->

Код:

/* SLIDER POPULAR PRODUCT */


/* SLIDER POPULAR PRODUCT */
/* HEADER SLIDER */
.headerSliderContainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	}

.headerSliderContainer p{
	width: 80.3%;
	text-align: center;
	font-size: 40px;
	color: #FFFFFF;
	background: #0112FF;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	}

/* SLIDER POPULAR PRODUCT */
/* SLIDER */
.sliderContainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 300px;
	}

.slider{
	max-width: 80%;
	height: 300px;
	overflow: hidden;
	border: 2px outset #0112FF;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	position: sticky;
	}

.slider2{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	transition: all ease 0.4s;
	transform: none;
	}

.slide{
	width: 294px;
	height: 290px;
	margin: 3px;
	border: 2px outset #0112FF;
	border-radius: 10px;
	}



/* SLIDER POPULAR PRODUCT */
/* BUTTON */
.buttonTopMenuLeft, .buttonTopMenuRight{
	width: 70px;
	height: 71px;
	border: none;
	filter: brightness(40%);
	}

.buttonTopMenuLeft:hover, .buttonTopMenuRight:hover{
	filter: none;
	cursor: pointer;
	transition: filter ease-out 1s;
	}

.buttonTopMenuLeft{
	background: url('../images/sliderTopMenu/arrowLeft.png') no-repeat;
	margin-right: 3px;
	}

.buttonTopMenuRight{
	background: url('../images/sliderTopMenu/arrowRight.png') no-repeat;
	margin-left: 3px;
	}

Код:

// SLIDER TOP

	function Slider2WidthIF(){
		let slideWidth = document.getElementsByClassName('slide');
		let sliderAmout = slideWidth.length;
		let slider2Width = sliderAmout * 300 + 'px';
		
		if (width < 460) {
			slider2Width = sliderAmout * 200 + 'px';
		}

		function Slider2Width() {
			let slider2 = document.getElementById('slider2');
			slider2.style.width = slider2Width;
		}

		Slider2Width();

		document.getElementById('buttonTopMenuLeft').onclick = buttonTopMenuLeft;
		
		function buttonTopMenuLeft() {
			let slider2 = document.getElementById('slider2');
			
			let j = 0;
			
			

			for(let i = 1; i <= sliderAmout; i++) {
				j = j - 300;
				let k = j + 'px';
				slider2.style.transform = `translateX(${k})`;
				return slider2.style.transform; break; 
			}
		}

	}

Slider2WidthIF();

Возникла проблема. Для слайдера свойство left не работает. Нашел выход использовать свойство transform. Но возникла другая загвоздка: transform срабатывает только один раз. Пробовал привязать к нему счетчик

document.getElementById('buttonTopMenuLeft').onclick = buttonTopMenuLeft;
		
		function buttonTopMenuLeft() {
			let slider2 = document.getElementById('slider2');
			
			let j = 0;
			
			

			for(let i = 1; i <= sliderAmout; i++) {
				j = j - 300;
				let k = j + 'px';
				slider2.style.transform = `translateX(${k})`;
				return slider2.style.transform; break; 
			}
		}

и другие подобные варианты. Но оказалось, что сначала он считает j, а потом применяет его к transform. Также пробовал вариант без счетчика... эффект такой же(только сдвиг на один первый слайд). Необходим вариант при котором каждое последующее нажатие вызывало бы сдвиг слайдера на один слайд. Помогите кто чем может

рони · #2 (**permalink**) 20.05.2020, 21:02

bublik787,
сделайте макет
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 20.05.2020, 21:07

bublik787,
на всякий случай бесконечная карусель

bublik787 · #4 (**permalink**) 21.05.2020, 00:37

спасибо попробую. Но в целом хотелось бы на будущее знать как выходить из подобной ситуации

рони · #5 (**permalink**) 21.05.2020, 08:29

bublik787,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
/* SLIDER POPULAR PRODUCT */
/* SLIDER POPULAR PRODUCT */
/* HEADER SLIDER */
.headerSliderContainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	}
.headerSliderContainer p{
	width: 80.3%;
	text-align: center;
	font-size: 40px;
	color: #FFFFFF;
	background: #0112FF;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	}
/* SLIDER POPULAR PRODUCT */
/* SLIDER */
.sliderContainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 300px;
	}
.slider{
	max-width: 80%;
	height: 300px;
	overflow: hidden;
	border: 2px outset #0112FF;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	position: sticky;
    transition: 1s;
	}
.slider2{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	transition: all ease 0.4s;
	transform: none;
	}
.slide{
	width: 294px;
	height: 290px;
	margin: 3px;
	border: 2px outset #0112FF;
	border-radius: 10px;
	}
/* SLIDER POPULAR PRODUCT */
/* BUTTON */
.buttonTopMenuLeft, .buttonTopMenuRight{
	width: 70px;
	height: 71px;
	border: none;
	filter: brightness(40%);
	}
.buttonTopMenuLeft:hover, .buttonTopMenuRight:hover{
	filter: none;
	cursor: pointer;
	transition: filter ease-out 1s;
	}
.buttonTopMenuLeft{
	background: url('../images/sliderTopMenu/arrowLeft.png') no-repeat;
	margin-right: 3px;
	}
.buttonTopMenuRight{
	background: url('../images/sliderTopMenu/arrowRight.png') no-repeat;
	margin-left: 3px;
	}
    </style>
</head>
<body>
<div class="headerSliderContainer">
	<p>ПОПУЛЯРНЫЕ ТОВАРЫ</p>
</div>
		<div class="sliderContainer">
			<button id="buttonTopMenuLeft" class="buttonTopMenuLeft">Left</button>
			<div id="slider" class="slider">
				<div id="slider2" class="slider2">
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">1</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">2</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">3</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">4</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">5</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">6</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">7</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">8</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">9</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">10</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">11</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">12</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">13</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">14</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
					<div class="slide">
						<img src="#" alt="">
						<div class="productName">15</div>
						<button class="buy">В КОРЗИНУ</button>
					</div>
				</div><!-- slider2 -->
			</div><!-- slider -->
			<button id="buttonTopMenuRight" class="buttonTopMenuRight">Right</button>
		</div><!-- sliderContainer -->
<script>
(function() {
let divs = document.getElementsByClassName('slide'), len = divs.length, index = 0, max = len - 1;
let slider = document.getElementById('slider2');
document.getElementById('buttonTopMenuLeft').onclick = moveLeft;
		function moveLeft() {
		        index = Math.min(++index, max);
                let left = divs[index].offsetLeft;
                let x = Math.min(left, slider.scrollWidth - slider.clientWidth);
                if(x != left) max = index;
				slider.style.transform = `translateX(${-x}px)`;
		}
document.getElementById('buttonTopMenuRight').onclick = moveRight;
		function moveRight() {
		        index = Math.max(--index, 0);
                let left = divs[index].offsetLeft;
				slider.style.transform = `translateX(${-left}px)`;
		}
window.onresize = function() {
   max = len - 1;
   index = 0
   slider.style.transform = `translateX(0px)`;
}
})()
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript