Как создать отзывчивую карусель отзывов | How to create responsive testimonial carousel

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

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

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

Как создать отзывчивую карусель отзывов | How to create responsive testimonial carousel

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

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

Для создания этой карусели вам нужно создать два файла. Есть два файла, один из которых представляет собой HTML-файл, а другой - CSS-файл. Owl carousel 2 будет использоваться для создания слайдера. Пожалуйста, добавьте необходимые файлы owl carousel, как показано в видеоуроке. 

Для сокращения рабочего процесса будет использоваться платформа bootstrap. Добавьте bootstrap с файлами CSS и js. Карусель owl зависит от последней версии jquery, и вы должны включить ее. Мы будем использовать значки социальных сетей в наших отзывах, и вы также должны включить CDN с потрясающим шрифтом. После завершения настройки, пожалуйста, скопируйте код из приведенного ниже поля и вставьте его в свой проект.

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

HTML КОД:

<!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>
CSS КОД:

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;
	}
}

JAVASCRIPT КОД:

<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 Комментарии