Карусель отзывов - важная часть любого веб-сайта. Они добавляют вашему сайту достоверности. В этой статье. Мы собираемся поделиться фрагментом карусели отзывов, который вы можете использовать прямо сейчас. Но прежде чем получить код, посмотрите видео-урок ниже, чтобы вы могли понять код.
Отличный способ направить свой бизнес в нужное русло - создать положительную репутацию в Интернете. Поскольку средний человек тратит на просмотр отзыва меньше минуты, важно убедиться, что текст легко читается.
Слишком длинные отзывы или слишком много слов будут пропущены и потеряны. Поскольку отзывы - это ваша лучшая реклама, вы хотите убедиться, что они качественные и их не слишком много. Ваша карусель отзывов - полезный инструмент, помогающий убедить неохотных клиентов покупать у вас.
Следующий фрагмент отображает несколько изображений в карусели, каждое с красивым эффектом тени от рамки. Поле с изображением останется в середине поля. Мы использовали отрицательные верхние значения в CSS, чтобы вывести половину изображения за рамки, чтобы оно выглядело немного уникальным. Под графическим полем мы использовали имя рецензента и его обозначение, а также некоторые замечания клиентов. Мы также использовали некоторые иконки социальных сетей, с помощью которых вы можете ссылаться на профили людей, которые дали свои отзывы, в социальных сетях.
Исходный код:
Для создания этой карусели вам нужно создать два файла. Есть два файла, один из которых представляет собой HTML-файл, а другой - CSS-файл. Owl carousel 2 будет использоваться для создания слайдера. Пожалуйста, добавьте необходимые файлы owl carousel, как показано в видеоуроке.
Для сокращения рабочего процесса будет использоваться платформа bootstrap. Добавьте bootstrap с файлами CSS и js. Карусель owl зависит от последней версии jquery, и вы должны включить ее. Мы будем использовать значки социальных сетей в наших отзывах, и вы также должны включить CDN с потрясающим шрифтом. После завершения настройки, пожалуйста, скопируйте код из приведенного ниже поля и вставьте его в свой проект.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
<meta charset="UTF-8">
<title>Responsive Testimonial Slider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="testimonial_area" class="section_padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="testmonial_slider_area text-center owl-carousel">
<div class="box-area">
<div class="img-area">
<img src="img/1.jpg" alt="">
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<div class="box-area">
<div class="img-area">
<img src="img/2.jpg" alt="">
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<div class="box-area">
<div class="img-area">
<img src="img/3.jpg" alt="">
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<div class="box-area">
<div class="img-area">
<img src="img/4.jpg" alt="">
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<div class="box-area">
<div class="img-area">
<img src="img/5.jpg" alt="">
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<div class="box-area">
<div class="img-area">
<img src="img/6.jpg" alt="">
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script>
$(".testmonial_slider_area").owlCarousel({
autoplay: true,
slideSpeed:1000,
items : 3,
loop: true,
nav:true,
navText:['<i class="fa fa-arrow-left"></i>','<i class="fa fa-arrow-right"></i>'],
margin: 30,
dots: true,
responsive:{
320:{
items:1
},
767:{
items:2
},
600:{
items:2
},
1000:{
items:3
}
}
});
</script>
</body>
</html>
body {
background: #0a69ed;
}
#testimonial_area {
padding: 10% 0;
}
.box-area {
padding: 30px;
position: relative;
display: block;
background: #fff;
color: #000;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin: 40px 0;
}
.box-area h5 {
font-size: 16px;
font-weight: 700;
color: #0a69ed;
margin-top: 30px;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.box-area span {
color: #262626;
display: block;
font-size: 13px;
margin: 0 0 10px;
font-weight: 400;
}
.box-area .content {
color: #262626;
}
.box-area .img-area {
width: 90px;
height: 90px;
position: absolute;
top: -40px;
left: 0;
bottom: 0;
margin: 0 auto;
right: 0;
z-index: 1;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}
.box-area .img-area img {
width: 100%;
height: auto;
border-radius: 50%;
}
.socials {
margin-top: 30px;
}
.socials i {
margin: 0 10px;
color: #0a69ed;
font-size: 18px;
}
#testimonial_area .owl-nav {
position: absolute;
top: 50%;
width: 100%;
}
#testimonial_area .owl-prev, #testimonial_area .owl-next {
width: 40px;
height: 40px;
line-height: 40px;
color: #0a69ed;
border-radius: 50%;
text-align: center;
background: #fff;
position: absolute;
}
#testimonial_area .owl-prev {
left: -60px;
top: -30px;
}
#testimonial_area .owl-next {
right: -60px;
top: -30px;
}
@media only screen and (max-width: 991px) {
.owl-nav {
display: none;
}
}
@media only screen and (max-width: 767px) {
.box-area {
text-align: center;
}
.owl-nav {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script>
$(".testmonial_slider_area").owlCarousel({
autoplay: true,
slideSpeed:1000,
items : 3,
loop: true,
nav:true,
navText:['<i class="fa fa-arrow-left"></i>','<i class="fa fa-arrow-right"></i>'],
margin: 30,
dots: true,
responsive:{
320:{
items:1
},
767:{
items:2
},
600:{
items:2
},
1000:{
items:3
}
}
});
</script>
0 Комментарии