Главная » HTML, CSS

3d слайдер на swiper с coverflow эффектом

3d слайдер на swiper с coverflow эффектом HTML, CSS
На чтение 5 мин Просмотров 1.7к. Опубликовано

Это конспект видео урока по созданию слайдера с 3d эффектом перелистывания слайдов, с помощью плагина swiper с его coverflow эффектом.

Видео урок:

Ссылки к уроку:

Содержание
  1. Готовый код из урока
  2. HTML разметка
  3. CSS стили
  4. JS код

Готовый код из урока

HTML разметка

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Swiper Coverflow</title>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	<link rel="stylesheet" href="./css/main.css">

	<link rel="icon" type="image/x-icon" href="./img/favicons/favicon.svg">
	<link rel="apple-touch-icon" sizes="180x180" href="./img/favicons/apple-touch-icon.png">
</head>
<body>

	<div class="logo">
		<div class="logo__title">ВебКадеми</div>
		<div class="logo__desc">обучение веб-разработке</div>
	</div>

	<h1>Swiper coverflow</h1>

	<!-- Slider main container -->
	<div class="swiper no-select">

		<!-- Additional required wrapper -->
		<div class="swiper-wrapper">
			<!-- Slides -->
			<div class="swiper-slide">
				<img src="./img/01.jpg" srcset="./img/[email protected]" alt="Photo">
			</div>

			<div class="swiper-slide">
				<img src="./img/02.jpg" srcset="./img/[email protected] 2x" alt="Photo">
			</div>
			<div class="swiper-slide">
				<img src="./img/03.jpg" srcset="./img/[email protected] 2x" alt="Photo">
			</div>
			<div class="swiper-slide">
				<img src="./img/04.jpg" srcset="./img/[email protected] 2x" alt="Photo">
			</div>

			<div class="swiper-slide">
				<img src="./img/05.jpg" srcset="./img/[email protected] 2x" alt="Photo">
			</div>

			<div class="swiper-slide">
				<img src="./img/06.jpg" srcset="./img/[email protected] 2x" alt="Photo">
			</div>

			<div class="swiper-slide">
				<img src="./img/07.jpg" srcset="./img/[email protected] 2x" alt="Photo">
			</div>

			<div class="swiper-slide">
				<img src="./img/08.jpg" srcset="./img/[email protected] 2x" alt="Photo">
			</div>
		</div>

		<!-- If we need pagination -->
		<div class="swiper-pagination"></div>
	</div>

	<div class="link-wrapper">
		<p><a href="https://webcademy.ru/blog/1144/" target="_blank">cтраница с уроком</a></p>
	</div>



	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	<script src="./js/main.js"></script>
</body>
</html>

CSS стили

@import url(https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800);

body {
	margin: 0;
	padding: 40px 0 100px;

	background-color: #284b59;
	background-image: radial-gradient(
		circle,
		rgb(44, 83, 100),
		rgb(32, 58, 67),
		rgb(15, 32, 39)
	);

	font-family: Manrope, sans-serif;
}

.logo {
	margin-bottom: 30px;
}

.logo__title {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: #77b8c2;
	letter-spacing: 0.02em;
}

.logo__desc {
	text-align: center;
	font-size: 14px;
	font-weight: 300;
	color: #77b8c2;
}

h1 {
	margin-bottom: 80px;
	text-align: center;
	color: #fff;
	font-weight: 800;
	font-size: 32px;
}

.link-wrapper {
	padding-top: 50px;
	font-weight: 300;
	text-align: center;
	font-size: 14px;
}

.link-wrapper a {
	color: #77b8c2;
	/* text-decoration: none; */
	opacity: 0.5;
	text-decoration-line: underline;
}

/* Swiper styles */

:root {
	--swiper-pagination-bottom: 0px;
	--swiper-theme-color: #018b9f;
}

.swiper {
	margin: 0 auto;
	width: 660px;
	padding-bottom: 50px !important;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 300px;
}

.no-select {
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE/Edge */
	user-select: none; /* Стандартный синтаксис */
}

JS код

const swiper = new Swiper('.swiper', {
	effect: 'coverflow',
	grabCursor: true,
	centeredSlides: true,
	slidesPerView: 3,
	spaceBetween: 30,
	speed: 600,

	coverflowEffect: {
		rotate: 50,
		stretch: 0,
		depth: 100,
		modifier: 1,
		slideShadows: true,
	},

	loop: true,

	keyboard: {
		enabled: true,
	},

	pagination: {
		el: '.swiper-pagination',
		dynamicBullets: true,
		clickable: true,
	},
});

© 2024 ВебКадеми