|
The Testimonial section with star ratings in Bootstrap serves to showcase client feedback and ratings, enhancing user interaction. It provides a visually appealing carousel format, suitable for business websites, e-commerce platforms, and service-based websites. This project combines Bootstrap’s responsive design capabilities with interactive star ratings, facilitating testimonials and user engagement effectively.
Syntax:<div id="carouselExampleFade"
class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
...
</div> Preview: Output Approach:- Firstly, Integrate the Bootstrap via CDN links. The section contains a container with a section header and a carousel for displaying testimonials.
- Each carousel item represents a testimonial with a profile picture, name, star ratings, and content.
- Stars are represented using Unicode character ‘★’ and styled with CSS. Each star has data attributes for testimonial ID and rating.
- It Utilized Bootstrap’s carousel component for navigation between testimonials. Customize control buttons using CSS.
- This JavaScript code adds functionality to the testimonial carousel by allowing users to select star ratings.
- It listens for clicks on the stars, updates the selected rating for each testimonial, and visually highlights the selected stars along with previous stars based on the rating.
- It does this by toggling the ‘active’ class on the clicked star and previous stars within the same testimonial. The carousel is configured to slide through testimonials using the
carousel-item class and control buttons.
Example: Illustartion of Testimonial Section with Star Ratings in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to create Testimonial Carousel using Bootstrap5</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap"
rel="stylesheet">
<link href=
"https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap"
rel="stylesheet">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="container">
<h1 class="section-header">
Select the Star for Rating
</h1>
<div id="carouselExampleControls"
class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="single-item">
<div class="row">
<div class="col-md-5">
<div class="profile">
<div class="img-area">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="">
</div>
<div class="bio">
<h2>GFG 1</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<span class="star" data-testimonial="1"
data-rating="1">★</span>
<span class="star" data-testimonial="1"
data-rating="2">★</span>
<span class="star" data-testimonial="1"
data-rating="3">★</span>
<span class="star" data-testimonial="1"
data-rating="4">★</span>
<span class="star" data-testimonial="1"
data-rating="5">★</span>
</div>
<p class="mt-3">Selected Rating:
<span class="selectedRating" data-testimonial="1">0
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p>
<span>
<i class="fa fa-quote-left"></i>
</span>
Write something about the work
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="single-item">
<div class="row">
<div class="col-md-5">
<div class="profile">
<div class="img-area">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="">
</div>
<div class="bio">
<h2>GFG 2</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<span class="star" data-testimonial="2"
data-rating="1">★</span>
<span class="star" data-testimonial="2"
data-rating="2">★</span>
<span class="star" data-testimonial="2"
data-rating="3">★</span>
<span class="star" data-testimonial="2"
data-rating="4">★</span>
<span class="star" data-testimonial="2"
data-rating="5">★</span>
</div>
<p class="mt-3">Selected Rating:
<span class="selectedRating"
data-testimonial="2">
0
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p>
<span>
<i class="fa fa-quote-left"></i>
</span>
Write something about the work
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="single-item">
<div class="row">
<div class="col-md-5">
<div class="profile">
<div class="img-area">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="">
</div>
<div class="bio">
<h2>GFG 3</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<span class="star"
data-testimonial="3"
data-rating="1">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="2">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="3">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="4">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="5">
★
</span>
</div>
<p class="mt-3">
Selected Rating:
<span class="selectedRating"
data-testimonial="3">
0
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p>
<span>
<i class="fa fa-quote-left"></i>
</span>
Write something about the work
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
<span class="visually-hidden">
Previous
</span>
</button>
<button class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
<span class="visually-hidden">
Next
</span>
</button>
</div>
</div>
</section>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script src="script.js"></script>
</body>
</html>
body {
background: green;
font-family: montserrat;
}
section {
display: grid;
place-items: center;
height: 100vh;
}
.section-header {
position: relative;
padding-bottom: 10px;
text-align: center;
font-weight: 900;
padding-bottom: 25px;
color: #fff;
}
.section-header:after {
content: '';
height: 3px;
width: 200px;
position: absolute;
bottom: 0;
left: calc(50% - 100px);
background: #fff;
}
.section-header span {
display: block;
font-size: 15px;
font-weight: 300;
}
.testimonials {
/* Adjusted max-width for a smaller size */
max-width: 500px;
/* Adjusted padding for a more compact appearance */
padding: 0 15px 20px;
margin: 0 auto 30px auto;
}
.single-item {
background: #fff;
color: #111;
padding: 15px;
/* Adjusted margin for a more compact appearance */
margin: 30px 15px;
}
.profile {
/* Adjusted margin for a more compact appearance */
margin-bottom: 15px;
text-align: center;
}
.img-area {
margin: 0 15px 15px 15px;
}
.img-area img {
/* Adjusted height for a smaller image */
height: 150px;
/* Adjusted width for a smaller image */
width: 150px;
border-radius: 50%;
border: 5px solid rgb(60, 211, 18);
}
.content {
/* Adjusted font size for a smaller text */
font-size: 16px;
}
.content p {
text-align: justify;
}
.content p span {
/* Adjusted font size for a smaller text */
font-size: 36px;
/* Adjusted margin for a smaller gap */
margin-right: 10px;
color: rgb(20, 218, 33);
}
.socials i {
/* Adjusted margin for your need */
margin-right: 15px;
}
.bio h4 {
font-family: 'Berkshire Swash', cursive;
}
.rating-container {
text-align: center;
}
.star {
font-size: 20px;
color: #e1e0dd;
cursor: pointer;
transition: color 0.2s;
}
.star:hover,
.star.active {
color: #ffD700;
}
/* styling for carousel control buttons */
.carousel-control-prev,
.carousel-control-next {
color: #fff;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: #11cf21;
}
#carouselExampleControls{
width: 700px;
height: 300px;
margin-left: 20rem;
}
document.addEventListener("DOMContentLoaded", function () {
let stars = document.querySelectorAll('.star');
stars.forEach(function (star) {
star.addEventListener('click', function () {
let testimonialId = this.getAttribute('data-testimonial');
let rating = this.getAttribute('data-rating');
let selectedRating = document
.querySelector('.selectedRating[data-testimonial="' + testimonialId + '"]');
selectedRating.textContent = rating;
// Reset all stars for the testimonial
let testimonialStars = document
.querySelectorAll('.star[data-testimonial="' + testimonialId + '"]');
testimonialStars.forEach(function (s) {
s.classList.remove('active');
});
// Add 'active' class to the clicked star and previous stars
this.classList.add('active');
let previousStars = Array.from(testimonialStars)
.slice(0, parseInt(rating) - 1);
previousStars.forEach(function (s) {
s.classList.add('active');
});
});
});
});
Output:
.gif) output
|
