2

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

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

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

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

1 ответ 1

0

Введение

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

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

2
  • Это не решило проблему, в итоге все равно когда меняешь размер экрана, появляется баг
    – uzi_no_uzi
    6 апр 2018 в 12:43
  • @uzi_no_uzi а пример можно? на больших экранах изображение не на весь экран с отступом снизу?
    – user192664
    6 апр 2018 в 15:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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