Клиенты хотят получить максимальную отдачу от своих денег, поэтому они ищут счастливых обладателей продукта. Это делает отзывы клиентов важной частью любого веб-сайта. Именно здесь вступают в силу отзывы. В этой статье мы собираемся поделиться другим важным фрагментом карусели отзывов.
Обычно товары или услуги покупают онлайн и отзывы людей помогают укрепить доверие к вашему продукту и услугам. Итак, у вас должен быть хорошо спроектированный слайдер отзывов, если вы хотите привлечь хороших потенциальных клиентов для своего бизнеса.
Чтобы создать карусель для наших отзывов, мы использовали materialize CSS. Дизайн материалов лежит в основе Materialize, современной адаптивной интерфейсной платформы. Это учебное пособие по materialize CSS и виджет для отзывов.
Для создания данного слайдера отзывов, вы должны включить файлы materialize CSS в свой проект. Вы должны добавить последний файл jQuery, чтобы карусель работала. Мы изменили карусель Materialize CSS по умолчанию и добавили несколько дополнительных функций. Мы взяли пять элементов карусели для проекта. В каждом div 'testi' мы взяли div для изображения, тег абзаца для комментария, тег h4 для имени рецензента и тег h5 для обозначения. К проекту был применен базовый стиль. Вы можете легко понять их, если посмотрите видео. Фрагменты карусели, которые мы использовали с веб-сайта, не являются автоматическими. Чтобы придать слайдеру анимацию автозапуска, мы добавили пользовательский код jquery.
Исходный код
Чтобы создать этот проект, вам нужно создать два файла. Один из них - HTML, а другой - CSS-файл. После создания файлов свяжите внешний CSS-файл с HTML-файлом. Добавьте также файлы Materialize CSS и jQuery. После этого скопируйте код из приведенного ниже поля кода и вставьте его в свой проект.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
<meta charset="UTF-8">
<title>How to 3D Testimonial Carousel using Materialize CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="carousel">
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="1.jpg">
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus veritatis repellendus delectus, est, alias recusandae."</p>
<h4>Jessica Jones</h4>
<h5>Web Designer</h5>
</div>
</a>
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="1.jpg">
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus veritatis repellendus delectus, est, alias recusandae."</p>
<h4>Jessica Jones</h4>
<h5>Web Designer</h5>
</div>
</a>
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="1.jpg">
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus veritatis repellendus delectus, est, alias recusandae."</p>
<h4>Jessica Jones</h4>
<h5>Web Designer</h5>
</div>
</a>
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="1.jpg">
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus veritatis repellendus delectus, est, alias recusandae."</p>
<h4>Jessica Jones</h4>
<h5>Web Designer</h5>
</div>
</a>
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="1.jpg">
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus veritatis repellendus delectus, est, alias recusandae."</p>
<h4>Jessica Jones</h4>
<h5>Web Designer</h5>
</div>
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
padding: 200
});
autoplay();
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
});
</script>
</body>
</html>
body {
margin: 0;
padding: 0;
background: #0a69ed;
}
.carousel{
height: 600px;
perspective: 250px;
}
.carousel .carousel-item {
width: 450px;
background: #fff;
padding: 50px;
height: auto;
text-align: center;
border-radius: 15px;
}
.img-area {
width: 100px;
height: 100px;
margin: 0 auto;
overflow: hidden;
border-radius: 50%;
border: inset 8px deepskyblue;
}
.img-area img{
width: 100%;
}
.testi p {
color: #262626;
font-size: 18px;
line-height: 1.9;
}
.testi h4 {
font-size: 20px;
margin: 0;
color: #000;
}
.testi h5 {
font-size: 14px;
letter-spacing: 5px;
margin: 7px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
padding: 200
});
autoplay();
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
});
</script>
0 Комментарии