Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Javascript Codes
Home Home How to How to use Sitemap Sitemap About us About Us Suggested Posts Suggested Privacy Policy Privacy Policy

Feel The Power


content logo

Bootstrap Sliders:

Bootstrap Circular Comments Slider

Previous CodePrevious Code Next CodeNext Code

Comment is one of the most important parts of any website. People will be attracted to the websites with comments. We are going to express the Bootstrap Circular Comments Slider in this post with a beautiful design. You can use this Simple Slider with Text on the page of your website. By using this code, you can mention your customer’s opinion about your page. If you have an online shop, this Comment Slider Code can be helpful. People can write their opinions and experiences about your product and share their ideas together.

By looking at the following preview, you can realize the beauty and attraction of this code. As the name appears, this Bootstrap Comment Slider has a circular theme and you can see different opinions rotatory. Each comment has a specific profile that audiences can set for themselves. You can see a large title at the top of the page and a small description. The unselected comments just have a profile and as you click on each one, you can see its description. After clicking on a profile, its comment appears with an animating effect. This Circular Slider Code not only is so functional but also has an attractive design.

#

Circular Slider Code

#

Simple Slider with Text

#

Comment Slider Code

#

Bootstrap Comment Slider

<!-- This script got from frontendfreecode.com -->
<section id="testimonial-area">
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="section-heading text-center">
                    <h5>Testimonial Design </h5>
                    <h2>A Word From Our Customers</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
                </div>
            </div>
        </div>
        <div class="testi-wrap">
            <div class="client-single active position-1" data-position="position-1">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-2" data-position="position-2">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-3" data-position="position-3">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-4" data-position="position-4">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-5" data-position="position-5">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-6" data-position="position-6">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-7" data-position="position-7">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" width="40px" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
        </div>
    </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
#testimonial-area .section-heading h2 {
	font-size: 48px;
	line-height: 58px;
}
.testi-wrap {
	position: relative;
	height: 725px;
	margin-top: -80px;
}
.client-single {
	margin-top: 20px;
	text-align: center;
	position: absolute;
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}
.client-info, .client-comment {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.client-single.inactive .client-comment, .client-single.inactive .client-info {
	display: none;
}
.client-single.inactive .client-comment, .client-single.inactive .client-info {
	opacity: 0;
	visibility: hidden;
}
.client-single.position-1 {
	-webkit-transform: scale(0.65);
	transform: scale(0.65);
}
.client-single.position-2 {
	left: -40px;
	top: 105px;
}
.client-single.position-3 {
	left: -60px;
	top: 240px;
	-webkit-transform: scale(0.4) !important;
	transform: scale(0.4) !important;
}
.client-single.position-4 {
	left: 55px;
	top: 380px;
}
.client-single.position-5 {
	top: 30px;
	right: 55px;
}
.client-single.position-6 {
	top: 225px;
	right: -40px;
}
.client-single.position-7 {
	top: 400px;
	right: 45px;
	-webkit-transform: scale(0.4) !important;
	transform: scale(0.4) !important;
}
.client-single.active {
	top: 10%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 10;
	width: 70%;
}
.client-single.active .client-comment, .client-single.active .client-info {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.client-single:not(.active) {
	-webkit-transform: scale(0.55);
	transform: scale(0.55);
	z-index: 99;
}
.client-single.active .client-img {
	width: 160px;
	height: 160px;
	margin: 0 auto 24px;
	position: relative;
}
.client-single.active .client-img:before {
	border-radius: 100%;
	content: "";
	background-image: -webkit-gradient(linear, left top, left bottom, from(#9d5bfe), to(#3890fe));
	background-image: linear-gradient(180deg, #9d5bfe 0%, #3890fe 100%);
	padding: 5px;
	width: 160px;
	height: 160px;
	top: -4px;
	left: 0px;
	position: absolute;
	z-index: -1;
}
.client-single .client-img img {
	width: 150px;
	border-radius: 50%;
	border: 8px solid #d1e9ff;
	cursor: pointer;
}
.client-single.active .client-img img {
	max-width: 160px;
	margin: 0 auto 24px;
	border: 0;
}
.client-comment {
	padding: 0 30px;
}
.client-comment h3 {
	font-size: 22px;
	line-height: 32px;
	color: #505b6d;
}
.client-comment span i {
	font-size: 60px;
	color: #0084ff;
	margin: 40px 0 24px;
	display: inline-block;
}
.client-info h3 {
	color: #000;
	font-weight: 600;
	margin-bottom: 4px;
}
.client-info p {
	color: #0084ff;
	text-transform: uppercase;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}
	.client-comment h3 {
		font-size: 18px;
		line-height: 28px;
	}
	.client-single.active {
		width: 60%;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.55);
		transform: scale(0.35);
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.3) !important;
		transform: scale(0.3) !important;
	}
	.client-single.active .client-img img {
		max-width: 100px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 108px;
		height: 108px;
		top: -4px;
		left: 6px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 580px;
	}
	#testimonial-area {
		padding: 100px 0 0;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}
	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}
	.client-single.active {
		width: 60%;
	}
	.client-comment span i {
		font-size: 40px;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.55);
		transform: scale(0.35);
	}
	.client-single.position-5, .client-single.position-7 {
		right: 0;
	}
	.client-single.position-4 {
		left: 0;
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.3) !important;
		transform: scale(0.3) !important;
	}
	.client-single.active .client-img img {
		max-width: 80px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 88px;
		height: 88px;
		top: -4px;
		left: 16px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 630px;
	}
}
@media only screen and (min-width: 360px) and (max-width: 479px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
		line-height: 40px;
	}
	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}
	.client-single.active {
		width: 80%;
	}
	.client-comment span i {
		font-size: 40px;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.25);
		transform: scale(0.25);
	}
	.client-single.position-5, .client-single.position-7, .client-single.position-6 {
		right: -70px;
	}
	.client-single.position-4 {
		left: -60px;
	}
	.client-single.position-3 {
		left: -75px;
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.25) !important;
		transform: scale(0.25) !important;
	}
	.client-single.active .client-img img {
		max-width: 80px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 88px;
		height: 88px;
		top: -4px;
		left: 16px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 600px;
	}
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}
	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}
	.client-single.active {
		width: 80%;
	}
	.client-comment span i {
		font-size: 40px;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.25);
		transform: scale(0.25);
	}
	.client-single.position-5, .client-single.position-7, .client-single.position-6 {
		right: -70px;
	}
	.client-single.position-4 {
		left: -60px;
	}
	.client-single.position-3 {
		left: -75px;
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.25) !important;
		transform: scale(0.25) !important;
	}
	.client-single.active .client-img img {
		max-width: 80px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 88px;
		height: 88px;
		top: -4px;
		left: 16px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 550px;
	}
}
$(document).ready(
    (function () {
        $(".client-single").on("click", function (event) {
            event.preventDefault();
            var active = $(this).hasClass("active");
            var parent = $(this).parents(".testi-wrap");
            if (!active) {
                var activeBlock = parent.find(".client-single.active");
                var currentPos = $(this).attr("data-position");
                var newPos = activeBlock.attr("data-position");
                activeBlock
                    .removeClass("active")
                    .removeClass(newPos)
                    .addClass("inactive")
                    .addClass(currentPos);
                activeBlock.attr("data-position", currentPos);
                $(this)
                    .addClass("active")
                    .removeClass("inactive")
                    .removeClass(currentPos)
                    .addClass(newPos);
                $(this).attr("data-position", newPos);
            }
        });
    })(jQuery)
);
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css'>
<script src='https://code.jquery.com/jquery-1.12.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css'>
<script src='https://code.jquery.com/jquery-1.12.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
#testimonial-area .section-heading h2 {
	font-size: 48px;
	line-height: 58px;
}
.testi-wrap {
	position: relative;
	height: 725px;
	margin-top: -80px;
}
.client-single {
	margin-top: 20px;
	text-align: center;
	position: absolute;
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}
.client-info, .client-comment {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.client-single.inactive .client-comment, .client-single.inactive .client-info {
	display: none;
}
.client-single.inactive .client-comment, .client-single.inactive .client-info {
	opacity: 0;
	visibility: hidden;
}
.client-single.position-1 {
	-webkit-transform: scale(0.65);
	transform: scale(0.65);
}
.client-single.position-2 {
	left: -40px;
	top: 105px;
}
.client-single.position-3 {
	left: -60px;
	top: 240px;
	-webkit-transform: scale(0.4) !important;
	transform: scale(0.4) !important;
}
.client-single.position-4 {
	left: 55px;
	top: 380px;
}
.client-single.position-5 {
	top: 30px;
	right: 55px;
}
.client-single.position-6 {
	top: 225px;
	right: -40px;
}
.client-single.position-7 {
	top: 400px;
	right: 45px;
	-webkit-transform: scale(0.4) !important;
	transform: scale(0.4) !important;
}
.client-single.active {
	top: 10%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 10;
	width: 70%;
}
.client-single.active .client-comment, .client-single.active .client-info {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.client-single:not(.active) {
	-webkit-transform: scale(0.55);
	transform: scale(0.55);
	z-index: 99;
}
.client-single.active .client-img {
	width: 160px;
	height: 160px;
	margin: 0 auto 24px;
	position: relative;
}
.client-single.active .client-img:before {
	border-radius: 100%;
	content: "";
	background-image: -webkit-gradient(linear, left top, left bottom, from(#9d5bfe), to(#3890fe));
	background-image: linear-gradient(180deg, #9d5bfe 0%, #3890fe 100%);
	padding: 5px;
	width: 160px;
	height: 160px;
	top: -4px;
	left: 0px;
	position: absolute;
	z-index: -1;
}
.client-single .client-img img {
	width: 150px;
	border-radius: 50%;
	border: 8px solid #d1e9ff;
	cursor: pointer;
}
.client-single.active .client-img img {
	max-width: 160px;
	margin: 0 auto 24px;
	border: 0;
}
.client-comment {
	padding: 0 30px;
}
.client-comment h3 {
	font-size: 22px;
	line-height: 32px;
	color: #505b6d;
}
.client-comment span i {
	font-size: 60px;
	color: #0084ff;
	margin: 40px 0 24px;
	display: inline-block;
}
.client-info h3 {
	color: #000;
	font-weight: 600;
	margin-bottom: 4px;
}
.client-info p {
	color: #0084ff;
	text-transform: uppercase;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}
	.client-comment h3 {
		font-size: 18px;
		line-height: 28px;
	}
	.client-single.active {
		width: 60%;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.55);
		transform: scale(0.35);
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.3) !important;
		transform: scale(0.3) !important;
	}
	.client-single.active .client-img img {
		max-width: 100px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 108px;
		height: 108px;
		top: -4px;
		left: 6px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 580px;
	}
	#testimonial-area {
		padding: 100px 0 0;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}
	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}
	.client-single.active {
		width: 60%;
	}
	.client-comment span i {
		font-size: 40px;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.55);
		transform: scale(0.35);
	}
	.client-single.position-5, .client-single.position-7 {
		right: 0;
	}
	.client-single.position-4 {
		left: 0;
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.3) !important;
		transform: scale(0.3) !important;
	}
	.client-single.active .client-img img {
		max-width: 80px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 88px;
		height: 88px;
		top: -4px;
		left: 16px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 630px;
	}
}
@media only screen and (min-width: 360px) and (max-width: 479px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
		line-height: 40px;
	}
	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}
	.client-single.active {
		width: 80%;
	}
	.client-comment span i {
		font-size: 40px;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.25);
		transform: scale(0.25);
	}
	.client-single.position-5, .client-single.position-7, .client-single.position-6 {
		right: -70px;
	}
	.client-single.position-4 {
		left: -60px;
	}
	.client-single.position-3 {
		left: -75px;
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.25) !important;
		transform: scale(0.25) !important;
	}
	.client-single.active .client-img img {
		max-width: 80px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 88px;
		height: 88px;
		top: -4px;
		left: 16px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 600px;
	}
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}
	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}
	.client-single.active {
		width: 80%;
	}
	.client-comment span i {
		font-size: 40px;
	}
	.client-single:not(.active) {
		-webkit-transform: scale(0.25);
		transform: scale(0.25);
	}
	.client-single.position-5, .client-single.position-7, .client-single.position-6 {
		right: -70px;
	}
	.client-single.position-4 {
		left: -60px;
	}
	.client-single.position-3 {
		left: -75px;
	}
	.client-single.position-3, .client-single.position-7 {
		-webkit-transform: scale(0.25) !important;
		transform: scale(0.25) !important;
	}
	.client-single.active .client-img img {
		max-width: 80px;
	}
	.client-single.active .client-img::before {
		padding: 5px;
		width: 88px;
		height: 88px;
		top: -4px;
		left: 16px;
	}
	.client-single.active .client-img {
		width: 120px;
		height: 100px;
	}
	.testi-wrap {
		height: 550px;
	}
}
</style>

</head>
<body>
<section id="testimonial-area">
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="section-heading text-center">
                    <h5>Testimonial Design </h5>
                    <h2>A Word From Our Customers</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
                </div>
            </div>
        </div>
        <div class="testi-wrap">
            <div class="client-single active position-1" data-position="position-1">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-2" data-position="position-2">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-3" data-position="position-3">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-4" data-position="position-4">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-5" data-position="position-5">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-6" data-position="position-6">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
            <div class="client-single inactive position-7" data-position="position-7">
                <div class="client-img">
                    <img src="http://frontendfreecode.com/img/steve.jpg" width="40px" alt="">
                </div>
                <div class="client-comment">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
                    <span><i class="fa fa-quote-left"></i></span>
                </div>
                <div class="client-info">
                    <h3>Design By</h3>
                    <p><a >Name and Family</a></p>
                </div>
            </div>
        </div>
    </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(
    (function () {
        $(".client-single").on("click", function (event) {
            event.preventDefault();
            var active = $(this).hasClass("active");
            var parent = $(this).parents(".testi-wrap");
            if (!active) {
                var activeBlock = parent.find(".client-single.active");
                var currentPos = $(this).attr("data-position");
                var newPos = activeBlock.attr("data-position");
                activeBlock
                    .removeClass("active")
                    .removeClass(newPos)
                    .addClass("inactive")
                    .addClass(currentPos);
                activeBlock.attr("data-position", currentPos);
                $(this)
                    .addClass("active")
                    .removeClass("inactive")
                    .removeClass(currentPos)
                    .addClass(newPos);
                $(this).attr("data-position", newPos);
            }
        });
    })(jQuery)
);
</script>

</body>
</html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
TOP CODES
Toggle Switch Button for Changing Language with Bootstrap
Draggable Cards with Bootstrap Grids
Bootstrap Table with Add New Row Button
WHAT IS NEW IN KERIXA?
Glassy Chat Box Code with Reaction Emojis
Dark Neo Brutal Resume Template
Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability
Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability
Flat Photo Frame Template
Cute Photo Frame Template
16 React JS Accordions
17 React JS Buttons
RECENT CODES
Bootstrap Timeline with Colorful Lines and Icons
Simple Dark Vertical Timeline with Bootstrap
Colorful Icons for Bootstrap Timeline Joints
Bootstrap Vertical Timeline with Image Cards and Descriptions
Vertical Bootstrap Timeline in Half Page
Drop Down Menu by React JS
Animating React Popup with Float in and Zoom Effects
Popup vs. Alert Code using React JS
React Glassy Gradient Popup Modal
Animating Toggle Popup Menu with React JS
CATEGORIES
Bootstrap Accordions Bootstrap Buttons
Bootstrap Cards Bootstrap Footers
Bootstrap Forms Bootstrap Grids
Bootstrap Headers Bootstrap Paginations
Bootstrap Popups Bootstrap Progress Bars
Bootstrap Search Boxes Bootstrap Sidebars
Bootstrap Sliders Bootstrap Tables
Bootstrap Tabs Bootstrap Thumbnails
Bootstrap Timeline Bootstrap Toggle Switches
React Accordions React Buttons
React Forms React Headers
React Menus React Popups
React Progress Bars React Sidebars
Frontend Free Code
© 2024 Kerixa Inc