Как правильно просчитать? — javascript html css

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Вопрос:


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

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

введите сюда описание изображения

Как можно решить данную проблему? 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>
Автор вопроса: uzi_no_uzi

Введение

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

.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. На соседний вопрос уже ответил. Может быть там что-нибудь полезное найдешь.

Источник

Вам также может быть интересно:

Drag and Drop UWP — c# xaml mvvm
Вопрос: Нужно иметь возможность добавлять изображения в приложение путем перетаскивания из файловой системы У Grid включил AllowDrop. Но как добавить перетаскиваемые изображения в коллекцию? Т.к. те ...
Растягивание Высоты , Резина — html css html5
Вопрос: Здравствуйте! Реализовал резиновый дизайн. Растягивается ширина, но длина по % не растягивается. Возможно ли это реализовать? Или так и задумано, растягивание только на ширину ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
requestAnimation и очередность отрисовки — javascript canvas
Вопрос: Здравствуйте! Реализовал 2D игру и в Edge работает все плавно и круто, но в Firefox'e подвисает, сказали, что нужно сделать, чтобы раз-два момент и все ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
ViewPager внутри ViewPager — такие матрешки работают? — android viewpager
Вопрос: Доброго времени суток. Назрела новая задача. Есть каталог мастеров. При выборе конкретного мастера открывается его страница (активити с ViewPager), и теперь мастеров можно перелистывать свайпом. ...
Почему id всегда 1 Yii2 — yii авторизация
Вопрос: Использую все как по документации. Для получения информации о пользователе использую $identity = $model->findOne(]); И каким бы не был email, id пользователя всегда ...

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *