Materialize CSS Testimonial Slider design

A testimonial slider or carousel is a website UI component used to display customer or user reviews. This slider or carousel usually displays the pictures, names, remarks, and other information of satisfied customers in a rotating set. Today we will create such a testimonial slider using HTML CSS and materialize CSS framework. Before collecting the source code, watch the following video tutorial at least once. It will help you understand the code after downloading it. We have many videos on frontend development on our youtube channel. If you like the videos then subscribe and press the bell icon next to it.

Materialize CSS testimonial Video Tutorial:

Hope you have watched the video above. A testimonial slider or carousel is an important part of a website. The real purpose of a testimonial slider is to increase the social proof and credibility of a business or product. Because through this a visitor can know the positive or negative experiences of a real customer. A well-designed testimonial carousel helps boost the conversion of a business. Apart from big companies, it also helps small companies who want to establish an online presence. It also increases the engagement of a website as it allows customers to learn about your business in a more interactive way.

We have mainly used Materialize CSS framework to create this user-friendly slider. If you don't know what a material framework is, it's a framework that allows web designers or developers to design user-friendly and responsive websites. This framework is mainly inspired by Google's Material Design concept. This framework has many UI components like cards, forms, modals, sliders, etc. You can easily implement these components in your next web project. In short, it is a time-saving tool that allows a developer to design a visually appealing website completely from scratch.

We have used a slider or carousel component of materialize css in this snippet. On each card, we have an image, a header text that can be used as the reviewer's name, and a paragraph text that can be used as the reviewer's opinion. You can see how the element is styled in the video above. It will be a manual slider meaning you have to click to move to the next slide. We shared a snippet about the autoplay materialize slider earlier on this website. You can collect that as well if you want.

You may also like:

Materialize CSS Testimonial Slider [ Source Code ]:

Include Materialize CSS's js and CSS file into your project. You can directly include them or you can use the CDN version as we showed in the tutorial above. For the slider to work, you need to add the latest jquery CDN as well. Copy the code and paste them into your project. Save the project and test it in your browser. If you are having any difficulties with the code you can download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testimonial carousel using materialize css</title>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <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="profile">
        <div class="carousel">
            <a class="carousel-item" href="#">
                <div class="card">
                    <div class="box1"></div>
                    <div class="img-area"><img src="image/a1.jpg" alt=""></div>
                    <div class="main-text">
                        <h2>Person One</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate recusandae quam amet enim voluptates alias accusantium sapiente! Adipisci vero fugiat aliquid explicabo quas eius!</p>
                    </div>
                </div>
            </a>
            <a class="carousel-item" href="#">
                <div class="card">
                    <div class="box1"></div>
                    <div class="img-area"><img src="image/a2.jpg" alt=""></div>
                    <div class="main-text">
                        <h2>Person two</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate recusandae quam amet enim voluptates alias accusantium sapiente! Adipisci vero fugiat aliquid explicabo quas eius!</p>
                    </div>
                </div>
            </a>
            <a class="carousel-item" href="#">
                <div class="card">
                    <div class="box1"></div>
                    <div class="img-area"><img src="image/a3.jpg" alt=""></div>
                    <div class="main-text">
                        <h2>Person three</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate recusandae quam amet enim voluptates alias accusantium sapiente! Adipisci vero fugiat aliquid explicabo quas eius!</p>
                    </div>
                </div>
            </a>
            <a class="carousel-item" href="#">
                <div class="card">
                    <div class="box1"></div>
                    <div class="img-area"><img src="image/a1.jpg" alt=""></div>
                    <div class="main-text">
                        <h2>Person four</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate recusandae quam amet enim voluptates alias accusantium sapiente! Adipisci vero fugiat aliquid explicabo quas eius!</p>
                    </div>
                </div>
            </a>
            <a class="carousel-item" href="#">
                <div class="card">
                    <div class="box1"></div>
                    <div class="img-area"><img src="image/a1.jpg" alt=""></div>
                    <div class="main-text">
                        <h2>Person five</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate recusandae quam amet enim voluptates alias accusantium sapiente! Adipisci vero fugiat aliquid explicabo quas eius!</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.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();
          });	
    </script>
</body>
</html>

ADD CSS:

body {
    background: aliceblue;
}
.carousel{
    height: 100vh;
    perspective: 250px;
}
.carousel .carousel-item{
    width: 450px;
}
.card {
	position: relative;
	margin: .5rem 0 1rem 0;
	background-color: #fff;
	width: 450px;
	height: 379px;
	color: #262626;
	border-radius: 100px;
	box-shadow: 0 8px 20px 0px rgba(0,0,0,0.2);
}
.img-area img {
	border-radius: 50%;
	border: 7px solid #fff;
	margin-top: -80px;
}

.box1 {
	background: #005bae;
	height: 120px;
	border-radius: 25px 25px 0 0;
}
.img-area {
  text-align: center;
}
.img-area img {
  width: 30%;
}
.main-text {
	padding: 8px 0;
	text-align: center;
}
.main-text h2 {
	font-weight: 900;
	font-size: 20px;
	margin: 0 0 20px;
	font-family: 'Alfa Slab One', cursive;
}

.main-text p{
  font-size: 16px;
  padding: 0 35px;
}

Hope the code is working properly. We have other snippets about Full website design, CSS animation examples, background animation, and so on. In order to get them, you need to click the load more below our homepage. If you think the contents of our website are useful, then share the contents of our website. We regularly share frontend-related source code on our blog. Visit our website regularly to get the codes.

DOWNLOAD CODE

Materialize CSS testimonial Video Tutorial:

Materialize CSS Testimonial Slider [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Materialize CSS Testimonial Slider design

Materialize CSS testimonial Video Tutorial:

Materialize CSS Testimonial Slider [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form