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

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem

Подпишись и скачивай
любые файлы, скрипты, проекты и многое другое

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

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

16.10.2024

17 просмтотров

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

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

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

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

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

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

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

HTML КОД:

<!DOCTYPE html>
<html lang="en">
<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 КОД:

<style>
.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;
}
}
</style>

Скачать

Категории: Слайдеры и Карусели

MonsterTem.ru

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem