This HTML, CSS and JS code helps you to create testimonial slider in your web project. This type of slider is perfect for showcasing positive customer feedback on your website, enhancing credibility, and boosting conversions by highlighting real-world experiences with your product or service.
Step 1: Include Header Assets
To get started, you’ll need to include the necessary CSS files including Reset CSS and Slick Slider assets in the <head> section of your HTML document. These files provide the styling and functionality for the slider.
<link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css"> <link rel='stylesheet' href='//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css'> <link rel='stylesheet' href='//cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css'>
Step 2: Create the HTML Structure
Next, construct the HTML structure for your testimonial slider. This involves creating a container for the slider and individual containers for each testimonial.
<div class='content'>
<div class='slider single-item'>
<div class='quote-container'>
<div class='portrait octogon'>
<img alt='' src='https://picsum.photos/id/447/140/140'>
</div>
<div class='quote'>
<blockquote>
<p>Meditation shabby chic master cleanse banh mi Godard. Asymmetrical Wes Anderson Intelligentsia you probably haven't heard of them.</p>
<cite>
<span>Kristi McSweeney</span>
<br>
Thundercats twee
<br>
Austin selvage beard
</cite>
</blockquote>
</div>
</div>
<div class='quote-container'>
<div class='portrait octogon'>
<img alt='' src='https://picsum.photos/id/550/140/140'>
</div>
<div class='quote'>
<blockquote>
<p>Bespoke occupy cred seitan. Austin street art freegan Truffaut leggings aesthetic, salvia chia Brooklyn flexitarian. Single-origin coffee before they sold out health goth, cornhole irony keffiyeh Austin taxidermy mlkshk blog trust fund banh mi you probably haven't heard of them.</p>
<cite>
<span>Dina Anderson</span>
<br>
Blue Bottle keffiyeh
<br>
Sartorial locavore Schlitz ennui
</cite>
</blockquote>
</div>
</div>
</div>
</div>
<svg>
<defs>
<clipPath clipPathUnits='objectBoundingBox' id='octogon'>
<polygon points='0.50001 0.00000, 0.61887 0.06700, 0.75011 0.06721, 0.81942 0.18444, 0.93300 0.25001, 0.93441 0.38641, 1.00000 0.49999, 0.93300 0.61887, 0.93300 0.75002, 0.81556 0.81944, 0.74999 0.93302, 0.61357 0.93444, 0.50001 1.00000, 0.38118 0.93302, 0.24998 0.93302, 0.18056 0.81556, 0.06700 0.74899, 0.06559 0.61359, 0.00000 0.49999, 0.06700 0.38111, 0.06700 0.25001, 0.18440 0.18058, 0.25043 0.06700, 0.38641 0.06559, 0.50001 0.00000'></polygon>
</clipPath>
</defs>
</svg>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js'></script><script src="./script.js"></script>
Step 3: Add CSS Styling
Now, let’s style the testimonial slider using CSS. This will define the visual appearance of the slider, including the layout, colors, fonts, and animations.
@charset "UTF-8";
html {
height: 100%;
}
body {
background: linear-gradient(130deg, #07d9a3, #048fee);
background-size: 400% 400%;
-webkit-animation: gradient 16s ease infinite;
animation: gradient 16s ease infinite;
}
.content {
margin: auto;
padding: 20px;
width: 80%;
max-width: 1200px;
min-width: 300px;
}
.slick-slider {
margin: 30px auto 50px;
}
.slick-prev,
.slick-next {
color: white;
opacity: 1;
height: 40px;
width: 40px;
margin-top: -20px;
}
.slick-prev path,
.slick-next path {
fill: rgba(255, 255, 255, 0.4);
}
.slick-prev:hover path,
.slick-next:hover path {
fill: #FFFFFF;
}
.slick-prev {
left: -35px;
}
.slick-next {
right: -35px;
}
.slick-prev:before,
.slick-next:before {
content: none;
}
.slick-dots li button:before {
color: rgba(255, 255, 255, 0.4);
opacity: 1;
font-size: 8px;
}
.slick-dots li.slick-active button:before {
color: #FFFFFF;
}
.quote-container {
min-height: 200px;
color: #666666;
font-size: 36px;
margin: 0 20px;
position: relative;
}
.quote-container:hover {
cursor: -webkit-grab;
cursor: grab;
}
.quote-container .portrait {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 140px;
width: 140px;
overflow: hidden;
}
.quote-container .portrait img {
display: block;
height: auto;
width: 100%;
}
.quote-container .quote {
position: relative;
z-index: 600;
padding: 40px 0 40px 180px;
margin: 0;
font-size: 20px;
font-style: italic;
line-height: 1.4 !important;
font-family: Calibri;
color: white;
}
.quote-container .quote p {
position: relative;
margin-bottom: 20px;
}
.quote-container .quote p:first-child:before {
content: "“";
color: rgba(255, 255, 255, 0.44);
font-size: 7.5em;
font-weight: 700;
opacity: 1;
position: absolute;
top: -0.4em;
left: -0.2em;
text-shadow: none;
z-index: -10;
}
.quote-container .quote cite {
display: block;
font-size: 14px;
}
.quote-container .quote cite span {
font-size: 16px;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
.dragging .quote-container {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.octogon {
-webkit-clip-path: polygon(50% 0%, 38.11% 6.7%, 24.99% 6.72%, 18.06% 18.44%, 6.7% 25%, 6.56% 38.64%, 0% 50%, 6.7% 61.89%, 6.7% 75%, 18.44% 81.94%, 25% 93.3%, 38.64% 93.44%, 50% 100%, 61.88% 93.3%, 75% 93.3%, 81.94% 81.56%, 93.3% 74.9%, 93.44% 61.36%, 100% 50%, 93.3% 38.11%, 93.3% 25%, 81.56% 18.06%, 74.96% 6.7%, 61.36% 6.56%, 50% 0%);
clip-path: url(#octogon);
height: 140px;
width: 140px;
}
@-webkit-keyframes gradient {
0% {
background-position: 5% 0%;
}
50% {
background-position: 96% 100%;
}
100% {
background-position: 5% 0%;
}
}
@keyframes gradient {
0% {
background-position: 5% 0%;
}
50% {
background-position: 96% 100%;
}
100% {
background-position: 5% 0%;
}
}
Step 4: Implement JavaScript Functionality
To enable the slider functionality, we’ll use JavaScript along with the Slick.js library. This code will initialize the slider, configure its settings, and handle user interactions.
var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';
$('.single-item').slick({
infinite: true,
dots: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 1000,
cssEase: 'ease-in-out',
prevArrow: prevButton,
nextArrow: nextButton
});
$('.quote-container').mousedown(function(){
$('.single-item').addClass('dragging');
});
$('.quote-container').mouseup(function(){
$('.single-item').removeClass('dragging');
});
Step 5: Add Footer Assets
Now add footer assets to call all required JavaScript files.
That’s it! You’ve successfully integrated this HTML code for a creating testimonial slider. This slider will allow you to showcase customer testimonials in an engaging and visually appealing way.
