Testimonial Card carousel using HTML, CSS & JavaScript [Source Code]
To make this website, you would like to make 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 {
font-family: Arial, sans-serif;
padding: 20px;
background: #180835;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
html, body {
height: 100%;
}
.carousel-container {
width: 90%;
max-width: 800px;
height: 500px;
position: relative;
}
.testimonial-card {
width: 90%;
position: absolute;
display: flex; /* Change to flex */
justify-content: center; /* Center horizontally */
opacity:0;
background: #8E2DE2; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding: 20px;
border-radius: 200px 20px 20px 200px;
transition: transform 0.6s ease, opacity 0.6s ease;
}
@media only screen and (max-width: 860px) {
.testimonial-card
{
flex-direction: column;
margin: 10px;
border-radius: 20px 120px 20px 130px;
}
}
@media only screen and (max-width: 600px) {
.testimonial-card
{
flex-direction: column;
margin: 10px;
border-radius: 200px 200px 20px 20px;
}
}
.user-image {
display: flex;
justify-content: center;
align-items: center;
}
.user-image img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border: 10px solid #fff;
}
.testimonial-content {
margin: 20px;
text-align: center;
background-color: #fff;
border-radius: 20px;
padding:10px;
height:auto;
min-height: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.testimonial-content p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
.testimonial-content h4 {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
.testimonial-content span {
font-size: 16px;
color: #666;
}
.credit a {
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
margin-top: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.testimonial-card.active {
opacity: 1;
}
.testimonial-card.prev {
opacity: 1;
}
.testimonial-card::before {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(-45deg, #4A00E0 0%, #8E2DE2 100% );
transform: translate3d(0px, 0px, 0) scale(0.99);
filter: blur(22px);
opacity: var(0.7);
transition: opacity 0.3s;
border-radius: inherit;
}
.testimonial-card::after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
border-radius: inherit;
}
const carouselContainer = document.querySelector('.carousel-container');
const testimonialCards = carouselContainer.querySelectorAll('.testimonial-card');
const totalCards = testimonialCards.length;
let currentCard = 0;
function showNextCard() {
const nextCard = (currentCard + 1) % totalCards;
testimonialCards[currentCard].classList.remove('active');
testimonialCards[nextCard].classList.add('active');
currentCard = nextCard;
}
setInterval(showNextCard, 5000);
Thank you for reading our blog. If you face any problem in creating this Testimonial Card Slider using HTML, CSS & JavaScript, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Explore
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
In Our older post it doesnot work we working on that.
Post a Comment
Thank you
Learning robo team