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

За основу взят слайдер, найденный на 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(); });

Пример:

HTML:

CSS:

jQuery:

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

Анимированный эффект смены фотографий на JS

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

Горизонтальный таймлайн

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

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

Разделы:

Фоновая анимация на JS

Простые решения: