Как правильно просчитать?

191

06 апреля 2018, 14:38

Есть такой самописный слайдер, нужно что бы слайды всегда были на весь экран, независимо от изменения размера экрана, не могу придумать, как так сделать

Проблема в том, что при изменении ширины экрана слайдер сбивается и приходит в правильное состояние, только после прогона всех слайдов:

Как можно решить данную проблему? https://codepen.io/anon/pen/LdgGqr

var pervSliderButton = document.querySelector('.js-slider__button_perv'); 
var nextSliderButton = document.querySelector('.js-slider__button_next'); 
 
pervSliderButton.addEventListener('click', sliderPerv); 
nextSliderButton.addEventListener('click', sliderNext); 
 
 
 
window.addEventListener('resize', resizeSlide); 
function resizeSlide() { 
	console.log(document.body.clientWidth); 
	var slides = document.querySelectorAll('.wrapper__slide'); 
	for (var i = 0; i < slides.length; i++) 
	slides[i].style.width = document.body.clientWidth + 'px'; 
	sliderWrap = document.querySelector('.slider__wrapper'); 
	sliderWrap.style.width = slides.length * document.body.clientWidth + 'px'; 
	return document.body.clientWidth; 
} 
 
sliderPoint = 0; 
function sliderNext() { 
	var slides = document.querySelectorAll('.wrapper__slide'); 
	sliderWrap = document.querySelector('.slider__wrapper'); 
	if (sliderPoint <= (-(slides.length-1)*resizeSlide())) { 
		sliderPoint = 0; 
		sliderWrap.style.transform = 'translateX('+ sliderPoint +'px' + ')'; 
	} else { 
		sliderWrap.style.transform = 'translateX('+ (sliderPoint - resizeSlide()) +'px' + ')'; 
		sliderPoint = sliderPoint - resizeSlide(); 
	} 
} 
 
function sliderPerv() { 
	var slides = document.querySelectorAll('.wrapper__slide'); 
	sliderWrap = document.querySelector('.slider__wrapper'); 
	if (sliderPoint >= 0) { 
		sliderPoint = -(slides.length-1)*resizeSlide(); 
		sliderWrap.style.transform = 'translateX('+ sliderPoint +'px' + ')'; 
	} else { 
		sliderWrap.style.transform = 'translateX('+ (sliderPoint + resizeSlide()) +'px' + ')'; 
		sliderPoint = sliderPoint + resizeSlide(); 
	} 
}

* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
} 
 
.slider { 
	width: 100%; 
	overflow: hidden; 
	position: relative; 
	max-height: 500px; 
} 
 
.slider__wrapper { 
	display: flex; 
	flex-wrap: nowrap; 
	position: relative; 
	width: 7680px; 
} 
 
.wrapper__slide img { 
	width: 100%; 
} 
 
.wrapper__button { 
	position: absolute; 
	top: 0; 
	bottom: 0; 
	width: 8%; 
	background-color: rgba(0, 0, 0, .2); 
	transition: 0.1s; 
	cursor: pointer; 
} 
 
.wrapper__button:hover { 
	background-color: rgba(0, 0, 0, .5) 
} 
 
.slider__button_perv { 
	left: 0; 
} 
 
.slider__button_next { 
	right: 0; 
}

<body> 
	<div class="slider"> 
		<div class="slider__wrapper"> 
			<div class="wrapper__slide"> 
				<img src="http://storage9.static.itmages.ru/i/18/0404/h_1522874100_1383101_25792ac067.jpg" alt="Слайд 1"> 
			</div> 
			<div class="wrapper__slide"> 
				<img src="http://storage1.static.itmages.ru/i/18/0404/h_1522874104_1822794_cefef52967.jpg" alt="Слайд 2"> 
			</div> 
			<div class="wrapper__slide"> 
				<img src="http://storage2.static.itmages.ru/i/18/0404/h_1522874108_2174295_2a76b9d678.jpg" alt="Слайд 3"> 
			</div> 
			<div class="wrapper__slide"> 
				<img src="http://storage4.static.itmages.ru/i/18/0404/h_1522874123_9925860_740e80c1e2.jpg" alt="Слайд 4"> 
			</div> 
			<div class="wrapper__slider-position"> 
				 
			</div> 
		</div> 
		<div class="wrapper__button slider__button_perv js-slider__button_perv"></div> 
		<div class="wrapper__button slider__button_next js-slider__button_next"></div> 
	</div> 
</body>

Answer 1

Введение

Чтобы растянуть блок на всю высоту и ширину экрана необходимо родительскому элементу присвоить:

.slider {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; 
}

И растянуть картинку на всю высоту:

.wrapper__slide img {
    width: 100%;
}

Финальный вариант

var pervSliderButton = document.querySelector('.js-slider__button_perv'); 
var nextSliderButton = document.querySelector('.js-slider__button_next'); 
 
pervSliderButton.addEventListener('click', sliderPerv); 
nextSliderButton.addEventListener('click', sliderNext); 
 
 
 
window.addEventListener('resize', resizeSlide); 
function resizeSlide() { 
	console.log(document.body.clientWidth); 
	var slides = document.querySelectorAll('.wrapper__slide'); 
	for (var i = 0; i < slides.length; i++) 
	slides[i].style.width = document.body.clientWidth + 'px'; 
	sliderWrap = document.querySelector('.slider__wrapper'); 
	sliderWrap.style.width = slides.length * document.body.clientWidth + 'px'; 
	return document.body.clientWidth; 
} 
 
sliderPoint = 0; 
function sliderNext() { 
	var slides = document.querySelectorAll('.wrapper__slide'); 
	sliderWrap = document.querySelector('.slider__wrapper'); 
	if (sliderPoint <= (-(slides.length-1)*resizeSlide())) { 
		sliderPoint = 0; 
		sliderWrap.style.transform = 'translateX('+ sliderPoint +'px' + ')'; 
	} else { 
		sliderWrap.style.transform = 'translateX('+ (sliderPoint - resizeSlide()) +'px' + ')'; 
		sliderPoint = sliderPoint - resizeSlide(); 
	} 
} 
 
function sliderPerv() { 
	var slides = document.querySelectorAll('.wrapper__slide'); 
	sliderWrap = document.querySelector('.slider__wrapper'); 
	if (sliderPoint >= 0) { 
		sliderPoint = -(slides.length-1)*resizeSlide(); 
		sliderWrap.style.transform = 'translateX('+ sliderPoint +'px' + ')'; 
	} else { 
		sliderWrap.style.transform = 'translateX('+ (sliderPoint + resizeSlide()) +'px' + ')'; 
		sliderPoint = sliderPoint + resizeSlide(); 
	} 
}

* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
} 
 
.slider { 
  position: absolute; 
  margin: 0; 
  padding: 0; 
  left: 0; 
  top: 0; 
  bottom: 0; 
  right: 0; 
  overflow: hidden;  
} 
 
.wrapper__slide img { 
  max-height: 100%; 
} 
 
.slider__wrapper { 
	display: flex; 
	flex-wrap: nowrap; 
	position: relative; 
	width: 7680px; 
} 
 
.wrapper__slide img { 
	width: 100%; 
} 
 
.wrapper__button { 
	position: absolute; 
	top: 0; 
	bottom: 0; 
	width: 8%; 
	background-color: rgba(0, 0, 0, .2); 
	transition: 0.1s; 
	cursor: pointer; 
} 
 
.wrapper__button:hover { 
	background-color: rgba(0, 0, 0, .5) 
} 
 
.slider__button_perv { 
	left: 0; 
} 
 
.slider__button_next { 
	right: 0; 
}

<body> 
	<div class="slider"> 
		<div class="slider__wrapper"> 
			<div class="wrapper__slide"> 
				<img src="http://storage9.static.itmages.ru/i/18/0404/h_1522874100_1383101_25792ac067.jpg" alt="Слайд 1"> 
			</div> 
			<div class="wrapper__slide"> 
				<img src="http://storage1.static.itmages.ru/i/18/0404/h_1522874104_1822794_cefef52967.jpg" alt="Слайд 2"> 
			</div> 
			<div class="wrapper__slide"> 
				<img src="http://storage2.static.itmages.ru/i/18/0404/h_1522874108_2174295_2a76b9d678.jpg" alt="Слайд 3"> 
			</div> 
			<div class="wrapper__slide"> 
				<img src="http://storage4.static.itmages.ru/i/18/0404/h_1522874123_9925860_740e80c1e2.jpg" alt="Слайд 4"> 
			</div> 
			<div class="wrapper__slider-position"> 
				 
			</div> 
		</div> 
		<div class="wrapper__button slider__button_perv js-slider__button_perv"></div> 
		<div class="wrapper__button slider__button_next js-slider__button_next"></div> 
	</div> 
</body>

ps. На соседний вопрос уже ответил. Может быть там что-нибудь полезное найдешь.

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ошибка при входе на страницу “админки”

Код страницы для перехода на страницу админки:

227

Java

Установить картинку на фон textArea

Добрый день,пишу легкий чатик, захотел сделать приятный интерфейс, и при попытке поставить картинку на фон textArea столкнулся с проблемой отсутствия...

266

Java

Внешние ключи в стиле orm

Как сделать внешние ключи в стиле orm? Пожалуйста, приведите подробные примеры

244

Java

Обьясните суть и логику Фрагмента,вот пример

Хочу использовать фрагменты для обновление ListView между двумя состояниями, нажать на чтение и бд выводит данные,запись и появляется другая...

236