3D-слайдер в виде куба

Пример:

Описание слайда

Более длинное описание слайда, которое не умещается в одну строку

Описание слайда с сылкой

Описание слайда

HTML:

<div class="cube-wrapper">
	<div class="cube-slider swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="photo.jpg" alt="photo" />
				<div class="cube-top">1</div>
				<div class="cube-bottom">
					<p>Описание слайда</p>
				</div>
			</div>
			
			<!-- Еще слайды -->
			
			<div class="swiper-slide">
				<img src="photo.jpg" alt="photo" />
				<div class="cube-top">N</div>
				<div class="cube-bottom">
					<p>Описание слайда</p>
				</div>
			</div>	
		</div>
	</div>
</div>

<p>Описание слайда</p>

</div>

<p>Описание слайда</p>

</div>

CSS:

Добавляем стили swiper и:

.cube-slider * {
	box-sizing: border-box;
}	
.cube-wrapper {
	position: relative;
	padding: 20px 0 60px 0;
}				
.cube-slider {
	position: relative;
	max-width: 400px;			
}		
.cube-slider .swiper-slide {
	position: relative;
	user-select: none;
	aspect-ratio: 1 / 1;
}
.cube-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;	
	display:block
}				
.cube-top {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 16px 20px rgba(0,0,0,0.3);
	padding: 6px 10px;
	color: #000;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 500;
    height: 40px;
	width: 40px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;			
}
.cube-slider .cube-bottom {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 0;
	bottom: 0;
	width: 100%;
	min-height: 70px;
	padding: 10px 20px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
}
.cube-slider .cube-bottom p {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.1;
}
@media screen and (max-width:767px) {
	.cube-slider .cube-bottom p {
		font-size: 14px;
	}	
}
.cube-slider .cube-bottom a {
	position: relative;
	color: #fff;
	text-decoration: none;
}
.cube-slider .cube-bottom a:before,
.cube-slider .cube-bottom a:after {
	content: "";
	border-bottom: 2px solid #fff;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -10px;
	opacity: 0;
	transition: 0.3s;
	display: inline-block;
	pointer-events: none;	
}
.cube-slider .cube-bottom a:before {
	border-bottom: 1px solid #bfe2ff;
	opacity: 1;
	bottom: -2px;
}
.cube-slider .cube-bottom a:hover:after {
	bottom: -2px;
	opacity: 1;	
}

.cube-slider * {

box-sizing: border-box;

}

.cube-wrapper {

position: relative;

padding: 20px 0 60px 0;

}

.cube-slider {

position: relative;

max-width: 400px;

}

.cube-slider .swiper-slide {

position: relative;

user-select: none;

aspect-ratio: 1 / 1;

}

.cube-slider .swiper-slide img {

width: 100%;

height: 100%;

object-fit: cover;

object-position: center top;

display:block

}

.cube-top {

position: absolute;

top: 12px;

right: 12px;

background: rgba(255, 255, 255, 0.7);

backdrop-filter: blur(10px);

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

padding: 6px 10px;

color: #000;

border-radius: 50%;

font-size: 20px;

font-weight: 500;

height: 40px;

width: 40px;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

}

.cube-slider .cube-bottom {

position: absolute;

display: flex;

flex-direction: column;

justify-content: center;

left: 0;

bottom: 0;

width: 100%;

min-height: 70px;

padding: 10px 20px;

background: rgba(0, 0, 0, 0.2);

backdrop-filter: blur(10px);

border-top: 1px solid rgba(255, 255, 255, 0.2);

color: #fff;

}

.cube-slider .cube-bottom p {

padding: 0;

margin: 0;

font-size: 16px;

line-height: 1.1;

}

@media screen and (max-width:767px) {

.cube-slider .cube-bottom p {

font-size: 14px;

}

.cube-slider .cube-bottom a {

position: relative;

color: #fff;

text-decoration: none;

}

.cube-slider .cube-bottom a:before,

.cube-slider .cube-bottom a:after {

content: "";

border-bottom: 2px solid #fff;

position: absolute;

width: 100%;

left: 0;

bottom: -10px;

opacity: 0;

transition: 0.3s;

display: inline-block;

pointer-events: none;

}

.cube-slider .cube-bottom a:before {

border-bottom: 1px solid #bfe2ff;

opacity: 1;

bottom: -2px;

}

.cube-slider .cube-bottom a:hover:after {

bottom: -2px;

opacity: 1;

}

JS:

Добавляем скрипт библиотеки swiper и:

var cubeSlider = new Swiper(".cube-slider", {
	effect: "cube",
	grabCursor: true,
	loop: true,
	speed: 1000,
	cubeEffect: {
		shadow: true,
		slideShadows: false,
		shadowOffset: 40,
		shadowScale: 1,
	},							
	autoplay: {
		delay: 2600,
		pauseOnMouseEnter: true,
	},
});

var cubeSlider = new Swiper(".cube-slider", {

effect: "cube",

grabCursor: true,

loop: true,

speed: 1000,

cubeEffect: {

shadow: true,

slideShadows: false,

shadowOffset: 40,

shadowScale: 1,

autoplay: {

delay: 2600,

pauseOnMouseEnter: true,

});

Богдан Таран: 26.03.2025 в 21:44

Если вы намучались как и я, то вот пару советов:
1) Не забудьте добавить отдельный файл со стилем и скриптом, а затем подключить их в header
2) Если вдруг у вас нормально стилизовались фотки, но нет анимации, то попробуйте при подключении скрипта убрать defer:
Было: <scrip src="js/swiper.js" defer></scrit>
Стало: <scrit src="js/swiper.js"></scrpt>
Типо он позволяет браузеру загружать JavaScript-файл в фоновом режиме, не блокируя рендеринг страницы

Ответить

Пример:

HTML:

CSS:

JS:

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

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

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