3D карусель отзывов с использованием Materialize CSS

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

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

Чтобы создать карусель для наших отзывов, мы использовали materialize CSS. Дизайн материалов лежит в основе Materialize, современной адаптивной интерфейсной платформы. Это учебное пособие по materialize CSS и виджет для отзывов. 

3D карусель отзывов с использованием Materialize CSS

Для создания данного слайдера отзывов, вы должны включить файлы materialize CSS в свой проект. Вы должны добавить последний файл jQuery, чтобы карусель работала. Мы изменили карусель Materialize CSS по умолчанию и добавили несколько дополнительных функций. Мы взяли пять элементов карусели для проекта. В каждом div 'testi' мы взяли div для изображения, тег абзаца для комментария, тег h4 для имени рецензента и тег h5 для обозначения. К проекту был применен базовый стиль. Вы можете легко понять их, если посмотрите видео. Фрагменты карусели, которые мы использовали с веб-сайта, не являются автоматическими. Чтобы придать слайдеру анимацию автозапуска, мы добавили пользовательский код jquery.

Исходный код

Чтобы создать этот проект, вам нужно создать два файла. Один из них - HTML, а другой - CSS-файл. После создания файлов свяжите внешний CSS-файл с HTML-файлом. Добавьте также файлы Materialize CSS и jQuery. После этого скопируйте код из приведенного ниже поля кода и вставьте его в свой проект. 

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

HTML КОД:

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

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

JAVASCRIPT КОД:

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