Project 1
Description of Project 1.
Project 2
Description of Project 2.
Project 3
Description of Project 3.
.carousel-slider {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-wrapper {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
position: relative;
min-width: 100%;
transition: transform 0.3s ease;
}
.carousel-item img {
width: 100%;
height: auto;
}
.project-info {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
opacity: 0;
transition: opacity 0.3s ease;
}
.carousel-item:hover {
transform: scale(1.05);
}
.carousel-item:hover .project-info {
opacity: 1;
}
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.8);
border: none;
cursor: pointer;
padding: 10px;
}
.carousel-arrow.left {
left: 10px;
}
.carousel-arrow.right {
right: 10px;
}
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const totalItems = items.length;
document.querySelector('.carousel-arrow.left').addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalItems - 1;
updateCarousel();
});
document.querySelector('.carousel-arrow.right').addEventListener('click', () => {
currentIndex = (currentIndex < totalItems - 1) ? currentIndex + 1 : 0;
updateCarousel();
});
function updateCarousel() {
const offset = -currentIndex * 100; // Move the carousel
document.querySelector('.carousel-wrapper').style.transform = translateX(${offset}%);
}
// Add click event to items for navigation
items.forEach(item => {
item.addEventListener('click', () => {
window.location.href = item.getAttribute('data-link');
});
});
Design creates culture. Culture shapes values. Values determine the future.
Design creates culture. Culture shapes values. Values determine the future.