Слайдер с фиксированным текстом

Пример:

Слайдер с фиксированным текстом

Текст накладывается на слайдер, в котором листаются только фотографии

HTML:

<div class="sl-container">
	<div class="swipe">
		<div class="panel" data-img="/photo-1.jpg"></div>
		<div class="panel" data-img="/photo-2.jpg"></div>
		<div class="panel" data-img="/photo-3.jpg"></div>
		<div class="panel" data-img="/photo-4.jpg"></div>
		<div class="panel" data-img="/photo-5.jpg"></div>
	</div>
	<div class="sl-info">
		<div class="inner">
			<h3>Слайдер с фиксированным текстом</h3>
			<p>Текст накладывается на слайдер, в котором листаются только фотографии</p>
		</div>
		<div class="sl-buttons">
			<button class="btn-prev" disabled>
				<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
			</button>
			<button class="btn-next">
				<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>	  
			</button>
		</div>
	</div>
</div>

</div>

<h3>Слайдер с фиксированным текстом</h3>

<p>Текст накладывается на слайдер, в котором листаются только фотографии</p>

</div>

</button>

</button>

</div>

CSS:

.sl-container {
	width: 100%;
	height: 500px;
	margin: 20px 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #000;
	position: relative;
}
.swipe {
	position: relative;
	width: 100%;
	height: 100%;
	background: #eee;
	overflow: hidden;
}
.panel {
	position: absolute;
	width: 100%;
	min-height: 100%;
	top: 0;
	left: 0;
	padding: 20px;
}
.left {
	left: -100%;
}
.right {
	left: 100%;
}
.sl-info {
	position: absolute;
	width: 70%;
	max-width: 500px;
	bottom: 15%;
	right: 5%;
	pointer-events: none;
}
.inner {
	position: relative;
	padding: 0.5em 2em 1em;
	background: #FFFFFF;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.inner h3 {
	font-size: 1.7em;
	font-weight: normal;
	color: #337AB7;
}
.inner p {
	font-family: Verdana, sans-serif;
}
.sl-info:before {
	content: "";
	position: absolute;
	width: 65%;
	height: 80%;
	top: 0;
	left: 0;
	transform: translate(-10px, -10px);
	background: #337AB7;
}
.sl-buttons {
	position: absolute;
	bottom: -50px;
	right: 5%;
	pointer-events: all;
}
.sl-buttons button {
	transition: ease .4s;
}
.sl-buttons button svg {
	margin: 10px 0;
}
.sl-buttons .btn-prev,
.sl-buttons .btn-next {
	width: 60px;
	height: 60px;
	margin-left: 10px;
	border: 2px solid #337AB7;
	outline: none;
	border-radius: 60px;
	color: #FFFFFF;
	background: #337AB7;
	box-shadow: 0px 3px 15px 2px rgba(0,0,0,.5);
	cursor: pointer;
}
.sl-buttons button:hover {
	box-shadow: 0px 3px 30px 3px rgba(0,0,0,.5);
}
.sl-buttons button:disabled {
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,.5);
	background: #BFE2FF;
	cursor: default;
}
.optional {
	width: 80%;
	max-width: 680px;
	margin: 6em auto;
	padding: 2em 3em;
	box-shadow: 
    0 3px 12px rgba(0,0,0,0.16), 
    0 3px 12px rgba(0,0,0,0.23);
}
@media (max-width: 620px) {
	body {
		font-size: 13px;
		line-height: 1.5em;
	}
	.sl-info {
		position: absolute;
		width: 100%;
		max-width: 100%;
		bottom: 0;
		right: 0;
	}
	.inner {
		padding: .5em 1.5em;
		box-shadow: none;
	}
	.sl-buttons {
		display: none;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

.sl-container {

width: 100%;

height: 500px;

margin: 20px 0;

padding: 0;

font-family: 'Roboto', sans-serif;

font-size: 1em;

line-height: 1.5em;

color: #000;

position: relative;

}

.swipe {

position: relative;

width: 100%;

height: 100%;

background: #eee;

overflow: hidden;

}

.panel {

position: absolute;

width: 100%;

min-height: 100%;

top: 0;

left: 0;

padding: 20px;

}

.left {

left: -100%;

}

.right {

left: 100%;

}

.sl-info {

position: absolute;

width: 70%;

max-width: 500px;

bottom: 15%;

right: 5%;

pointer-events: none;

}

.inner {

position: relative;

padding: 0.5em 2em 1em;

background: #FFFFFF;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}

.inner h3 {

font-size: 1.7em;

font-weight: normal;

color: #337AB7;

}

.inner p {

font-family: Verdana, sans-serif;

}

.sl-info:before {

content: "";

position: absolute;

width: 65%;

height: 80%;

top: 0;

left: 0;

transform: translate(-10px, -10px);

background: #337AB7;

}

.sl-buttons {

position: absolute;

bottom: -50px;

right: 5%;

pointer-events: all;

}

.sl-buttons button {

transition: ease .4s;

}

.sl-buttons button svg {

margin: 10px 0;

}

.sl-buttons .btn-prev,

.sl-buttons .btn-next {

width: 60px;

height: 60px;

margin-left: 10px;

border: 2px solid #337AB7;

outline: none;

border-radius: 60px;

color: #FFFFFF;

background: #337AB7;

box-shadow: 0px 3px 15px 2px rgba(0,0,0,.5);

cursor: pointer;

}

.sl-buttons button:hover {

box-shadow: 0px 3px 30px 3px rgba(0,0,0,.5);

}

.sl-buttons button:disabled {

box-shadow: 0px 1px 5px 0px rgba(0,0,0,.5);

background: #BFE2FF;

cursor: default;

}

.optional {

width: 80%;

max-width: 680px;

margin: 6em auto;

padding: 2em 3em;

box-shadow:

0 3px 12px rgba(0,0,0,0.16),

0 3px 12px rgba(0,0,0,0.23);

}

@media (max-width: 620px) {

body {

font-size: 13px;

line-height: 1.5em;

}

.sl-info {

position: absolute;

width: 100%;

max-width: 100%;

bottom: 0;

right: 0;

}

.inner {

padding: .5em 1.5em;

box-shadow: none;

}

.sl-buttons {

display: none;

}

jQuery:

$(function(){
	var tolerance = 100;
	var speed = 650;
	var interactiveElements = $('input, button, a');
	var itemsLength = $('.panel').length;
	var active = 1;
	for (i=1; i<=itemsLength; i++){
		var $layer = $(".panel:nth-child("+i+")");
		var bgImg = $layer.attr("data-img");
		$layer.css({
			"background": "url("+bgImg+") no-repeat center / cover"
		});
	};
	setTimeout(function() {
		$(".panel").css({
			"transition": "cubic-bezier(.4,.95,.5,1.5) "+speed+"ms"
		});
	}, 200);
	$(".panel:not(:first)").addClass("right");
	function swipeScreen() {
		$('.swipe').on('mousedown touchstart', function(e) {
			
			var touch = e.originalEvent.touches;
			var start = touch ? touch[0].pageX : e.pageX;
			var difference;
			$(this).on('mousemove touchmove', function(e) {
				var contact = e.originalEvent.touches,
				end = contact ? contact[0].pageX : e.pageX;
				difference = end-start;
			});
			$(window).one('mouseup touchend', function(e) {
				e.preventDefault();
				// Переход вправо:
				if (active < itemsLength && difference < -tolerance) {
					$(".panel:nth-child("+active+")").addClass("left");
					$(".panel:nth-child("+(active+1)+")").removeClass("right");
					active += 1;
					btnDisable();
				};
				// Переход влево:
				if (active > 1 && difference > tolerance) {
					$(".panel:nth-child("+(active-1)+")").removeClass("left");
					$(".panel:nth-child("+active+")").addClass("right");
					active -= 1;
					btnDisable();
				};
				$('.swipe').off('mousemove touchmove');
			});
		});
	};
	swipeScreen();
	interactiveElements.on('touchstart touchend touchup', function(e) {
		e.stopPropagation();
	});
	// Кнопки:
	$(".btn-prev").click(function(){
		// Переход влево:
		if (active > 1) {
			$(".panel:nth-child("+(active-1)+")").removeClass("left");
			$(".panel:nth-child("+active+")").addClass("right");
			active -= 1;
			btnDisable();
		};
	});
	$(".btn-next").click(function(){
		// Переход вправо:
		if (active < itemsLength) {
			$(".panel:nth-child("+active+")").addClass("left");
			$(".panel:nth-child("+(active+1)+")").removeClass("right");
			active += 1;
			btnDisable();
		};
	});
	function btnDisable() {
		if (active >= itemsLength) {
			$(".btn-next").prop("disabled", true);
			$(".btn-prev").prop("disabled", false);
		}
		else if (active <= 1) {
			$(".btn-prev").prop("disabled", true);
			$(".btn-next").prop("disabled", false);
		}
		else {
			$(".btn-prev, .btn-next").prop("disabled", false);
		};
	};
});

$(function(){

var tolerance = 100;

var speed = 650;

var interactiveElements = $('input, button, a');

var itemsLength = $('.panel').length;

var active = 1;

for (i=1; i<=itemsLength; i++){

var $layer = $(".panel:nth-child("+i+")");

var bgImg = $layer.attr("data-img");

$layer.css({

"background": "url("+bgImg+") no-repeat center / cover"

});

};

setTimeout(function() {

$(".panel").css({

"transition": "cubic-bezier(.4,.95,.5,1.5) "+speed+"ms"

});

}, 200);

$(".panel:not(:first)").addClass("right");

function swipeScreen() {

$('.swipe').on('mousedown touchstart', function(e) {

var touch = e.originalEvent.touches;

var start = touch ? touch[0].pageX : e.pageX;

var difference;

$(this).on('mousemove touchmove', function(e) {

var contact = e.originalEvent.touches,

end = contact ? contact[0].pageX : e.pageX;

difference = end-start;

});

$(window).one('mouseup touchend', function(e) {

e.preventDefault();

// Переход вправо:

if (active < itemsLength && difference < -tolerance) {

$(".panel:nth-child("+active+")").addClass("left");

$(".panel:nth-child("+(active+1)+")").removeClass("right");

active += 1;

btnDisable();

};

// Переход влево:

if (active > 1 && difference > tolerance) {

$(".panel:nth-child("+(active-1)+")").removeClass("left");

$(".panel:nth-child("+active+")").addClass("right");

active -= 1;

btnDisable();

};

$('.swipe').off('mousemove touchmove');

});

};

swipeScreen();

interactiveElements.on('touchstart touchend touchup', function(e) {

e.stopPropagation();

});

// Кнопки:

$(".btn-prev").click(function(){

// Переход влево:

if (active > 1) {

$(".panel:nth-child("+(active-1)+")").removeClass("left");

$(".panel:nth-child("+active+")").addClass("right");

active -= 1;

btnDisable();

};

});

$(".btn-next").click(function(){

// Переход вправо:

if (active < itemsLength) {

$(".panel:nth-child("+active+")").addClass("left");

$(".panel:nth-child("+(active+1)+")").removeClass("right");

active += 1;

btnDisable();

};

});

function btnDisable() {

if (active >= itemsLength) {

$(".btn-next").prop("disabled", true);

$(".btn-prev").prop("disabled", false);

}

else if (active <= 1) {

$(".btn-prev").prop("disabled", true);

$(".btn-next").prop("disabled", false);

}

else {

$(".btn-prev, .btn-next").prop("disabled", false);

};

});

Фотографии kellepics

Лидия Александровна: 30.07.2023 в 18:12

Почему-то Слайдер с фиксированным текстом не работает... Вставила ссылки своих картинок, поменяла текст и всё. А на сайте появляется только текст. Почему?
В другом слайдере эти картинки работают.

Ответить
- Alexander: 01.08.2023 в 08:25
  
  Дайте ссылку на результат
  
  Ответить
Сергей: 19.02.2022 в 06:31

Здравствуйте, как сделать чтоб несколько слайдеров корректно работало на одной странице? заранее спасибо!

Ответить
Шевкет: 17.03.2021 в 21:22

Здравствуйте, а как сделать что бы и текст менялся?, заранее благодарен

Ответить
- Alexander: 18.03.2021 в 06:29
  Добавить текст в элемент слайда:
  
  <div class="panel" data-img="/photo-1.jpg"></div>
  
  и править стили
  Ответить

Пример:

Слайдер с фиксированным текстом

HTML:

CSS:

jQuery:

Смотрите также:

Гармошка из фотографий на jQuery

3D слайдер-карусель

Слайдер для radio кнопок

Добавить комментарий:

Комментарии: