Карусель отзывов с флип-анимацией (эффект переворота) на Bootstrap 5

Карусель отзывов или слайдер - это тип компонента пользовательского интерфейса, используемого на веб-сайте или в приложении, который отображает отзывы, оставленные клиентами или пользователями, в виде слайдера.

Этот тип слайдера обычно включает фотографию рецензента, заявление, обозначение, название компании и другую соответствующую информацию. Сегодня мы создадим адаптивный слайдер отзывов, используя последнюю версию Bootstrap Framework Bootstrap 5 с добавлением анимации переворота CSS card. Перед сбором исходного кода просмотр следующего видеоурока поможет вам разобраться в коде.

Отзывы с флип-анимацией (эффект переворота) на | Testimonials with Flip Animation Bootstrap 5

СКАЧАТЬ

Карусель отзывов - очень важный компонент пользовательского интерфейса для повышения доверия к любому бренду и привлечения большего количества клиентов. Поскольку они показывают отзывы клиентов, это повышает доверие клиентов и увеличивает ваши продажи. Красиво настроенная карусель отзывов полезна для пользовательского интерфейса вашего сайта и рейтинга в поисковых системах. Чтобы выделиться и привлечь внимание ваших посетителей, мы также включили анимацию переворачивания карточек в этот проект.

Исходный Код:

Чтобы создать проект, сначала создайте файлы HTML и CSS и добавьте в него Bootstrap 5 CDN. Весь процесс показан в приведенном выше руководстве. Затем скопируйте код из приведенного ниже поля кода, вставьте его в свой проект и сохраните. Протестируйте его в своем браузере, чтобы убедиться, что код работает должным образом.

Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
	<!-- divinectorweb.om -->
<head>
	<meta charset="UTF-8">
	<title>How to create Testimonial Carousel using Bootstrap 5</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="carousel slide" data-bs-ride="carousel" id="carouselExampleSlidesOnly">
			
			<div class="carousel-inner">
				<div class="carousel-item active">
					<div class="row">
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/3.jpg">
									<h2>Jesicca Doe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/5.jpg">
									<h2>Claire Chedd</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/2.jpg">
									<h2>Maria Lopez</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="row">
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/1.jpg">
									<h2>Jesicca Doe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/2.jpg">
									<h2>Claire Chedd</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/3.jpg">
									<h2>Mary Joe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="row">
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/4.jpg">
									<h2>Jesicca Doe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/5.jpg">
									<h2>Claire Chedd</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/6.jpg">
									<h2>Mary Joe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>			


		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js">
	</script> 
	<script>
	</script>
</body>
</html>

CSS КОД:


body {
	background: #0259f0;
	height: 70vh;
	font-family: 'Poppins', sans-serif;
}
.container {
	margin-top: 15%;
}
.card {
    width: 100%;
    height: 300px;
    transform-style: preserve-3d;
    perspective: 500px;
    border: none;
    background-color: inherit;
}

.card .box {
    position: absolute;
    color: #262626;
    width: 100%;
    height: 100%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    background: #fff;
    transform-style: preserve-3d;
    transition: 0.5s;
    backface-visibility: hidden;
}
.card .box.front{
    background-image: url(img/pattern.png);
    background-repeat: repeat;
}
.card .box.front,
.card .box.back {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card .box.front img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 5px solid #262626;
	margin-bottom: 25px;
}

.card:hover .box.front {
    transform: rotateY(180deg);
}
.box.front h2 {
	font-family: 'Bebas Neue', cursive;
}
.box.front h4 {
	font-size: 18px;
	letter-spacing: 2px;
}
.socials i {
	margin: 0 15px;
}
.card .box.back {
    position: absolute;
    background: #fff;
    transform: rotateY(180deg);
    padding: 20px 30px;
    text-align: center;
    user-select: none;
}

.card .box.back .fa-quote-left {
	position: absolute;
	top: 25px;
	left: 180px;
	font-size: 3.2rem;
}

.card:hover .box.back {
    transform: rotateY(360deg);
}

@media(max-width: 991.5px) {
    .col-lg-4 {
        margin-top: 40px;
        margin-bottom: 20px;
    }
}