Hello developers, today in this blog you will learn to create a Responsive Carousel Testimonial Slider using HTML, CSS & JavaScript.
A testimonial is a card with a statement that comments on the success of how good something is. Testimonial help users to build trust in the product or a person. The testimonials card may contain the person's name, some content, and a profile picture. The carousel is also called a slider or slideshow. The carousel may be the convenient way to display the changing or sliding cards one by one on the website.
In this program (Responsive Carousel Testimonial Slider), there are three testimonial cards with profile pictures, some statements, and the name of the person with their designation. Below the card, there are three radio buttons. On clicking on the button, the respective slide will be shown. This program has both automatic run time and manual controls. This Responsive Carousel Testimonial Slider slide to the next testimonial card for every ten seconds. The user can also manually control the slider by clicking on the radio buttons.
This Responsive Carousel Testimonial Slider is made responsive by using CSS media query property. Based on the screen size, the number of given testimonial cards and the radio buttons will appear. The automatic run time is made by using JavaScript code.
The source code of this Responsive Carousel Testimonial Slider using HTML, CSS & JavaScript is given below, you can copy the source code of this program. You can use this code of Responsive Carousel Testimonial Slider using HTML, CSS & JavaScript, you can take this code to the next level with your creativity.
Responsive Carousel Testimonal Slider using HTML, CSS & JavaScript [Source Code]
To make this website (Responsive Carousel Testimonial Slider), you need to create three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body {
margin-top: 100px !important;
background: #8A2387;
background: -webkit-linear-gradient(to right, #F27121, #E94057, #8A2387);
background: linear-gradient(to right, #F27121, #E94057, #8A2387);
}
.testimonial {
border-right: 4px solid #fff;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
padding: 30px 30px 30px 130px;
margin: 0 15px 30px 15px;
overflow: hidden;
position: relative;
border-radius: 12px;
background-color: #12192c;
}
.testimonial:before {
content: "";
position: absolute;
bottom: -4px;
left: -17px;
border-top: 25px solid #E94057;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(45deg);
}
.testimonial:after {
content: "";
position: absolute;
top: -4px;
left: -17px;
border-top: 25px solid #F27121;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(135deg);
}
.testimonial .pic {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: 60px;
left: 20px;
}
.testimonial .pic img {
width: 100%;
height: auto;
}
.testimonial .description {
font-size: 15px;
letter-spacing: 1px;
color: #6f6f6f;
line-height: 25px;
margin-bottom: 15px;
}
.testimonial .title {
display: inline-block;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #E94057;
margin: 0;
}
.testimonial .post {
display: inline-block;
font-size: 17px;
color: #F27121;
font-style: italic;
}
.owl-theme .owl-controls .owl-page span {
border: 2px solid #2a3d7d;
background: #fff !important;
border-radius: 50px !important;
opacity: 1;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page:hover span {
background: #12192c !important;
border-color: #fff;
}
@media only screen and (max-width: 767px) {
.testimonial {
padding: 20px;
text-align: center;
}
.testimonial .pic {
display: block;
position: static;
margin: 0 auto 15px;
}
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
}
$(document).ready(function() {
$("#testimonial-slider").owlCarousel({
items: 2,
itemsDesktop: [1000, 2],
itemsDesktopSmall: [990, 2],
itemsTablet: [768, 1],
pagination: true,
navigation: false,
navigationText: ["", ""],
slideSpeed: 1000,
autoPlay: true
});
});
Thank you for reading our blog. If you face any problem in creating this Responsive Carousel Testimonial Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team