Our Lovely Client
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}
h6 {
color: #007bff;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
h2 {
color: #333;
font-size: 2.5em;
margin-top: 0;
margin-bottom: 40px;
}
.carousel {
position: relative;
overflow: hidden;
padding: 20px 0;
}
.carousel-container {
display: flex;
transition: transform 0.5s ease;
}
.logo {
flex: 0 0 calc(33.333% - 20px);
margin: 0 10px;
background-color: #fff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.logo img {
max-width: 80%;
max-height: 80%;
pointer-events: none;
user-select: none;
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.5);
color: #fff;
border: none;
padding: 10px 15px;
cursor: pointer;
z-index: 10;
}
.carousel-button-left {
left: 10px;
}
.carousel-button-right {
right: 10px;
}
@media (max-width: 768px) {
.logo {
flex: 0 0 calc(50% - 20px);
}
}
@media (max-width: 480px) {
.logo {
flex: 0 0 calc(100% - 20px);
}
}
LETS MEET
Our Lovely Client
<
>
const carousel = document.querySelector('.carousel-container');
const logos = document.querySelectorAll('.logo');
const buttonLeft = document.querySelector('.carousel-button-left');
const buttonRight = document.querySelector('.carousel-button-right');
let currentIndex = 0;
const totalLogos = logos.length;
const logosPerView = getLogosPerView();
function getLogosPerView() {
if (window.innerWidth <= 480) return 1;
if (window.innerWidth <= 768) return 2;
return 3;
}
function updateCarousel() {
const logoWidth = logos[0].offsetWidth;
carousel.style.transform = `translateX(-${currentIndex * logoWidth}px)`;
}
function moveLeft() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = totalLogos - logosPerView;
}
updateCarousel();
}
function moveRight() {
currentIndex++;
if (currentIndex > totalLogos - logosPerView) {
currentIndex = 0;
}
updateCarousel();
}
buttonLeft.addEventListener('click', moveLeft);
buttonRight.addEventListener('click', moveRight);
// Prevent dragging of images
logos.forEach(logo => {
logo.addEventListener('dragstart', (e) => e.preventDefault());
});
// Initial update
updateCarousel();
// Update on window resize
window.addEventListener('resize', () => {
logosPerView = getLogosPerView();
currentIndex = Math.min(currentIndex, totalLogos - logosPerView);
updateCarousel();
});