.carousel-container {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.carousel {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
gap: 20px;
padding: 10px 50px;
}
.carousel::-webkit-scrollbar {
display: none;
}
/* ITEM WRAPPER */
.item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
width: 100px;
}
/* CIRCLE IMAGE */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background: #0073aa;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
}
.circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.item:hover .circle {
transform: scale(1.1);
}
/* TITLE BELOW */
.title {
margin-top: 8px;
font-size: 14px;
color: #333;
text-align: center;
font-weight: 600;
}
/* NAV BUTTONS */
.nav {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
color: white;
border: none;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
}
.left { left: 5px; }
.right { right: 5px; }
.nav:hover {
background: rgba(0,0,0,0.8);
}
const carousel = document.querySelector(‘.carousel’);
document.querySelector(‘.left’).onclick = () => {
carousel.scrollBy({ left: -300, behavior: ‘smooth’ });
};
document.querySelector(‘.right’).onclick = () => {
carousel.scrollBy({ left: 300, behavior: ‘smooth’ });
};
Aravind Babu Valimi
Mob: +91 99513 39223
Andra Pradesh
Dr Ryazuddin
Mob: +91 91779 91692
Telangana State
