Пошаговый слайдер

За основу взят слайдер, найденный на codepen.io

Пример:

Эмили Блант

Англо-американская актриса, обладательница премий «Золотой глобус»

Кейт Бекинсейл

Британская актриса.

Оливия Уайлд

Американская актриса, продюсер и режиссёр.

Алисия Викандер

Шведская актриса, танцовщица и продюсер

HTML:

<div class="slider-content">
	<div class="header">
	<div class="logo">Пошаговый <span>слайдер</span></div>
	</div>
	<div class="slider-wrapper">
		<div class="slider-container"> 
			<div class="control-nav">
				<ul></ul>
			</div>
			<div class="next-button">
				<svg class="arrow-right-5" viewBox="0 0 154 109">
					<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
						<g>
							<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "/>
						</g>
						<g>
							<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "/>
						</g>
					</symbol>
					<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)" />
				</svg>
			</div>
			<div class="slide active">
				<div class="slide-content ">
					<div class="clip-svg">
						<img class="" src="slide-1.jpg" alt="" />
						<div class="title-wrapper">
							<div class="title-1">заголовок</div>
							<div class="title-2">текст</div>
						</div>
					</div>
				</div>
			</div>
			<!-- еще слайды -->
			<div class="slide">
				<div class="slide-content ">
					<div class="clip-svg">
						<img class="" src="slide-n.jpg" alt="" />
						<div class="title-wrapper">
							<div class="title-1">заголовок</div>
							<div class="title-2">текст</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <div class="footer-wrapper">
		<ul>
			<li><a href="#link">ссылка</a></li>
			<li><a href="#link">ссылка</a></li>
		</ul>
	</div>
</div>

<div class="logo">Пошаговый <span>слайдер</span></div>

</div>

</div>

<g>

</g>

<g>

</g>

</symbol>

</svg>

</div>

<div class="title-1">заголовок</div>

<div class="title-2">текст</div>

</div>

<div class="title-1">заголовок</div>

<div class="title-2">текст</div>

</div>

<ul>

<li><a href="#link">ссылка</a></li>

</ul>

</div>

CSS:

.slider-content * {
	box-sizing: border-box;
	font-family: Verdana, sans-serif;  
	line-height: 1.2;
	text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);   	
}
.slider-content {
	position: relative;
	background: #fff;
	margin: 20px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.slider-content .slider-container {
	position: relative;
	height: 600px;
	overflow: hidden;
}
.slider-content .slide-content {
	position: relative;
	width: 100%;
	height: 100%;
}
.slider-content .header {
	position: absolute;
	top: 30px;
	left: 40px;
	z-index: 999;
}
.slider-content .header .logo {
	font-size: 26px;
	color: white;    
}
.slider-content .header .logo span {
	font-weight: bold;
}
.slider-content .slide {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.slider-content .slide:after {
	content: "";
	display: table;
	clear: both;
}
.slider-content .slide.active {
	opacity: 1;
}
.slider-content .slide .clip-svg {
	clip-path: circle(25px at 90%);
	width: 100%;
	height: 100%;
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.slider-content .slide.active .clip-svg {
    clip-path: circle(130% at 90%);
}
.slider-content img {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slider-content .title-wrapper {
	position: absolute;
	color: white;
	left: 80px;
	bottom: 80px;
	width: calc(100% - 160px);  
}
.slider-content .title-wrapper .title-1 {
	font-size: 30px;
	margin: 0;
	margin-bottom: 20px;
	font-weight: 900;  
}
.slider-content .title-wrapper .title-2 {
	font-size: 22px;
	margin: 0;   
}
.slider-content .control-nav {
	position: absolute;
	left: 30px;
	top: 20%;
	z-index: 999;
}
.slider-content .control-nav ul {
	position: relative;
	list-style: none;
	padding: 0;
}
.slider-content .control-nav li {
	position: relative;
	width: 30px;
	height: 30px;
	margin: 10px 0;
	background: white;
	opacity: 0.5;
	border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;  
	font-size: 13px;
	font-weight: bold;
}
.slider-content .control-nav li.active {
	opacity: 1;
}
.slider-content .next-button {
	position: absolute;
	right: 1%;
	height: 20%;
	width: 20%;  
	top: 40%;
	cursor: pointer;
	z-index: 999;
}
.slider-content .next-button svg {
	height: 100%;
	width: 100%;
	transform: rotate(270deg); 
	fill: #FFF;
}
.slider-content .footer-wrapper {
	position: absolute;
	color: white;
	bottom: 30px;
	right: 40px;
	z-index: 10;
}
.slider-content .footer-wrapper ul {
	list-style: none;
	margin: 0;
	padding: 12px 0 0;
	box-shadow: inset 0 18px 12px -12px rgba(0,0,0,0.4);
}
.slider-content .footer-wrapper ul:after {
	content: "";
	display: table;
	clear: both;
}
.slider-content .footer-wrapper li {
	position: relative;
	float: left;
	margin: 0 12px;
}	
.slider-content .footer-wrapper a {
	color: #FFF;
	text-decoration:none;
	transition-duration: 0.3s;
	display:inline-block;
	color: white;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}	
.slider-content .footer-wrapper a:hover {
	color: #FFF;
	text-decoration:none;
}		
.slider-content .footer-wrapper a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #FFF;
    transition: width 0.2s ease-in-out;
}
.slider-content .footer-wrapper a:hover:after,
.slider-content .footer-wrapper a:focus:after {
    width: 100%;
}

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

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

.slider-content * {

box-sizing: border-box;

font-family: Verdana, sans-serif;

line-height: 1.2;

text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);

}

.slider-content {

position: relative;

background: #fff;

margin: 20px 0;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.slider-content .slider-container {

position: relative;

height: 600px;

overflow: hidden;

}

.slider-content .slide-content {

position: relative;

width: 100%;

height: 100%;

}

.slider-content .header {

position: absolute;

top: 30px;

left: 40px;

z-index: 999;

}

.slider-content .header .logo {

font-size: 26px;

color: white;

}

.slider-content .header .logo span {

font-weight: bold;

}

.slider-content .slide {

position: absolute;

width: 100%;

height: 100%;

opacity: 0;

}

.slider-content .slide:after {

content: "";

display: table;

clear: both;

}

.slider-content .slide.active {

opacity: 1;

}

.slider-content .slide .clip-svg {

clip-path: circle(25px at 90%);

width: 100%;

height: 100%;

transition-property: all;

transition-duration: 0.5s;

transition-timing-function: ease;

}

.slider-content .slide.active .clip-svg {

clip-path: circle(130% at 90%);

}

.slider-content img {

position: absolute;

display: block;

width: 100%;

height: 100%;

object-fit: cover;

}

.slider-content .title-wrapper {

position: absolute;

color: white;

left: 80px;

bottom: 80px;

width: calc(100% - 160px);

}

.slider-content .title-wrapper .title-1 {

font-size: 30px;

margin: 0;

margin-bottom: 20px;

font-weight: 900;

}

.slider-content .title-wrapper .title-2 {

font-size: 22px;

margin: 0;

}

.slider-content .control-nav {

position: absolute;

left: 30px;

top: 20%;

z-index: 999;

}

.slider-content .control-nav ul {

position: relative;

list-style: none;

padding: 0;

}

.slider-content .control-nav li {

position: relative;

width: 30px;

height: 30px;

margin: 10px 0;

background: white;

opacity: 0.5;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 13px;

font-weight: bold;

}

.slider-content .control-nav li.active {

opacity: 1;

}

.slider-content .next-button {

position: absolute;

right: 1%;

height: 20%;

width: 20%;

top: 40%;

cursor: pointer;

z-index: 999;

}

.slider-content .next-button svg {

height: 100%;

width: 100%;

transform: rotate(270deg);

fill: #FFF;

}

.slider-content .footer-wrapper {

position: absolute;

color: white;

bottom: 30px;

right: 40px;

z-index: 10;

}

.slider-content .footer-wrapper ul {

list-style: none;

margin: 0;

padding: 12px 0 0;

box-shadow: inset 0 18px 12px -12px rgba(0,0,0,0.4);

}

.slider-content .footer-wrapper ul:after {

content: "";

display: table;

clear: both;

}

.slider-content .footer-wrapper li {

position: relative;

float: left;

margin: 0 12px;

}

.slider-content .footer-wrapper a {

color: #FFF;

text-decoration:none;

transition-duration: 0.3s;

display:inline-block;

color: white;

font-size: 18px;

font-weight: bold;

text-transform: uppercase;

}

.slider-content .footer-wrapper a:hover {

color: #FFF;

text-decoration:none;

}

.slider-content .footer-wrapper a:after {

display: block;

content: "";

height: 2px;

width: 0%;

background-color: #FFF;

transition: width 0.2s ease-in-out;

}

.slider-content .footer-wrapper a:hover:after,

.slider-content .footer-wrapper a:focus:after {

width: 100%;

}

jQuery:

let mySlider = {
	config : { 
		slider : '.slider-content',
		activeSlide : '.slide.active',
		button: '.next-button',
		transition: 800,
		delay: function() {return this.transition;},
		navigation : '.control-nav'
	},
	init : function(config) {
        this.createNav();
        $(mySlider.config.button).click(function() {
			mySlider.animateSlide($(this));
		});
	},
	getActiveSlide : function() {
		return $(mySlider.config.activeSlide);    
	},
	getNextSlide : function() {
		let nextSlide = mySlider.getActiveSlide().next();
		if ( nextSlide.length === 0 ){
			nextSlide = $(mySlider.config.slider).find('.slide').eq(0);   
		} 
		return nextSlide;
	}, 
	createNav : function() {
		let totalSlides = $(mySlider.config.slider).find('.slide').length;
		let controlNav = $(mySlider.config.navigation).find('ul');
		let nav;                
		for( let i=0; i < totalSlides; i++ ){
			let active = "";
			if(i === 0){
				active = 'active';
			}
			controlNav.append('<li class="slider-nav nav-'+i+' '+active+' ">'+ (i+1) +'</li>')
		}                                       
	},
	animateNav : function() {
		let activeNav  = $('li.active');
		let nextNav = activeNav.next();
		if(nextNav.length === 0){
			nextNav = $('.control-nav li').eq(0);
		}
		activeNav.removeClass('active');
		nextNav.addClass('active');
	},
	animateSlide : function(button) {
		let activeSlide  = mySlider.getActiveSlide();
		let nextSlide = mySlider.getNextSlide();
		let delay = mySlider.config.delay(); 
		let clipPath = $('.clip-svg');
		clipPath.css('transition-duration', mySlider.config.transition+'ms');
		button.css('pointer-events', 'none');
		nextSlide.css('z-index',10);
		nextSlide.addClass('active').css('opacity', 1); 
		setTimeout(function() {
			activeSlide.removeClass('active').css('opacity', 0);
		}, delay);
		setTimeout(function() {
			nextSlide.css('z-index','');
			button.css('pointer-events', 'auto');
		}, delay + 300);
		mySlider.animateNav();
	}
} 
$(document).ready(function() { mySlider.init(); });

let mySlider = {

config : {

slider : '.slider-content',

activeSlide : '.slide.active',

button: '.next-button',

transition: 800,

delay: function() {return this.transition;},

navigation : '.control-nav'

init : function(config) {

this.createNav();

$(mySlider.config.button).click(function() {

mySlider.animateSlide($(this));

});

getActiveSlide : function() {

return $(mySlider.config.activeSlide);

getNextSlide : function() {

let nextSlide = mySlider.getActiveSlide().next();

if ( nextSlide.length === 0 ){

nextSlide = $(mySlider.config.slider).find('.slide').eq(0);

}

return nextSlide;

createNav : function() {

let totalSlides = $(mySlider.config.slider).find('.slide').length;

let controlNav = $(mySlider.config.navigation).find('ul');

let nav;

for( let i=0; i < totalSlides; i++ ){

let active = "";

if(i === 0){

active = 'active';

}

controlNav.append('<li class="slider-nav nav-'+i+' '+active+' ">'+ (i+1) +'</li>')

}

animateNav : function() {

let activeNav = $('li.active');

let nextNav = activeNav.next();

if(nextNav.length === 0){

nextNav = $('.control-nav li').eq(0);

}

activeNav.removeClass('active');

nextNav.addClass('active');

animateSlide : function(button) {

let activeSlide = mySlider.getActiveSlide();

let nextSlide = mySlider.getNextSlide();

let delay = mySlider.config.delay();

let clipPath = $('.clip-svg');

clipPath.css('transition-duration', mySlider.config.transition+'ms');

button.css('pointer-events', 'none');

nextSlide.css('z-index',10);

nextSlide.addClass('active').css('opacity', 1);

setTimeout(function() {

activeSlide.removeClass('active').css('opacity', 0);

}, delay);

setTimeout(function() {

nextSlide.css('z-index','');

button.css('pointer-events', 'auto');

}, delay + 300);

mySlider.animateNav();

}

$(document).ready(function() { mySlider.init(); });

Дмитрий: 08.02.2023 в 02:58

У меня все получилось, но пришлось везде присваивать другие классы, в хтмл, цсс и скрипте (то есть дубликат всего с другими классами). Это конечно большой объем работы при добавлении нового слайдера и по этому прийдется для упрощения создать отдельные файлы для него цсс и jquery. По другому я так понял, что ни как и многие мучаются с этой проблемой.

Ответить
Дмитрий: 08.02.2023 в 00:03

Про CSS глупость написал, тоже не работает.

Ответить
Алексей: 21.11.2021 в 11:06

А можно сделать, чтобы автоматически листался?

Ответить
- Дмитрий: 05.02.2023 в 15:36
  
  За это отвечает такая строка, например:
  
  setTimeout(showSlides, 2000); // Change image every 2 seconds
  
  Ответить
  - Владимир: 16.03.2023 в 17:14
    
    К сожалению не так просто настроить автопереключение. Можно поподробнее для чайников.
    
    Ответить
    - Alexander: 20.03.2023 в 11:43
      
      Можно просто клик поставить через интервал
      
      setInterval(function(){ $(".next-button").click(); }, 2000);
      
      Ответить
- Дмитрий: 05.02.2023 в 15:38
  
  Или через CSS как в этом посте:
  
  https://atuin.ru/blog/slajder-s-menyayushhimisya-foto-na-css/
  
  Ответить
- Дмитрий: 07.02.2023 в 23:54
  
  Слайдер хороший, я его видоизменил под себя, но…
  Не работает 2 и более слайдеров на одной странице, хоть дивами их дели, хоть таблицами.
  В первый слайдер добавляются кружочки со второго слайдера и фото и т.д.
  Пролистывая в одном слайдере, пролистывается во всех.
  Через CSS каждому присваивать свой класс не хотелось бы, потому что их не может быть, а точно будет очень много, 100 и более.
  
  Подскажите пожалуйста нубу как их разделить?
  
  Ответить
  - Alexander: 10.02.2023 в 14:00
    
    Скрипт менять нужно, он не расчитывался на несколько слайдеров на 1 странице.
    
    Ответить

Пример:

HTML:

CSS:

jQuery:

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

Секция-слайдер с четырьмя фотографиями

Новостной слайдер

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

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

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