Composant de curseur de carrousel 3D pour portefeuille
Un composant de curseur de carrousel réactif inspiré de la 3D pour présenter des éléments de portfolio, avec des couleurs complémentaires et une prise en charge du mode sombre. Conçu dans un souci de profondeur et d’engagement.
HTML Code
<div class="overflow-hidden py-12 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-400 dark:to-indigo-500">
Our Showcase
</h2>
<div class="relative w-full aspect-video md:h-96 lg:h-[400px] xl:h-[500px] group perspective-1000px">
<!-- Hidden Checkbox for Navigation (simulated interactive effect) -->
<input type="radio" name="carousel-slide" id="slide-1" class="hidden" checked>
<input type="radio" name="carousel-slide" id="slide-2" class="hidden">
<input type="radio" name="carousel-slide" id="slide-3" class="hidden">
<input type="radio" name="carousel-slide" id="slide-4" class="hidden">
<div class="absolute w-full h-full ease-in-out duration-700 transform-style-preserve-3d relative-carousel-wrapper">
<!-- Slide 1 -->
<label for="slide-1" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-teal-400 to-blue-500 dark:from-teal-600 dark:to-blue-700 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 current-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1018/600/400" alt="Project 1" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Elegant Web Design</h3>
<p class="text-sm text-gray-100 mb-4">Crafting a seamless and intuitive user experience for a modern tech startup.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-teal-600 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
<!-- Slide 2 -->
<label for="slide-2" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 right-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1015/600/400" alt="Project 2" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Mobile App Development</h3>
<p class="text-sm text-gray-100 mb-4">Building a cross-platform mobile application with robust features and engaging UI.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-indigo-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
<!-- Slide 3 -->
<label for="slide-3" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-purple-500 to-red-600 dark:from-purple-700 dark:to-red-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 far-right-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1004/600/400" alt="Project 3" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Brand Identity Design</h3>
<p class="text-sm text-gray-100 mb-4">Developing a comprehensive brand identity including logo, typography, and guidelines.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-purple-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
<!-- Slide 4 -->
<label for="slide-4" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-red-500 to-orange-600 dark:from-red-700 dark:to-orange-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 left-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1003/600/400" alt="Project 4" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">E-commerce Platform</h3>
<p class="text-sm text-gray-100 mb-4">Building a high-performance e-commerce solution with integrated payment gateways.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-red-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
</div>
<!-- Navigation Dots -->
<div class="absolute bottom-0 md:bottom-[-2.5rem] lg:bottom-[-3rem] left-1/2 -translate-x-1/2 flex space-x-3 pointer-events-none z-20">
<label for="slide-1" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-1-active"></label>
<label for="slide-2" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-2-active"></label>
<label for="slide-3" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-3-active"></label>
<label for="slide-4" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-4-active"></label>
</div>
</div>
</div>
</div>
<style>
/* Base styles for 3D carousel container */
.perspective-1000px {
perspective: 1000px;
}
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
/* General slide positioning for animation */
.relative-carousel-wrapper label {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(0.8) translateY(0);
opacity: 0;
}
/* Define transformations for each slide based on checked state */
#slide-1:checked ~ .relative-carousel-wrapper .current-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .right-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .left-slide-transform {
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
}
/* Right slide */
#slide-1:checked ~ .relative-carousel-wrapper .right-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .left-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .current-slide-transform {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
pointer-events: auto; /* Make visible side slides clickable */
}
/* Far right slide */
#slide-1:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .left-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .current-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .right-slide-transform {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
pointer-events: auto;
}
/* Left slide */
#slide-1:checked ~ .relative-carousel-wrapper .left-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .current-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .right-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .far-right-slide-transform {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
pointer-events: auto;
}
/* Navigation dot active states */
#slide-1:checked ~ .navigation .dot-1-active,
#slide-2:checked ~ .navigation .dot-2-active,
#slide-3:checked ~ .navigation .dot-3-active,
#slide-4:checked ~ .navigation .dot-4-active {
background-color: #6366f1; /* Tailwind indigo-500 */
transform: scale(1.4);
}
/* Update navigation dot colors on checked state */
#slide-1:checked ~ div.navigation-dots label[for='slide-1'],
#slide-2:checked ~ div.navigation-dots label[for='slide-2'],
#slide-3:checked ~ div.navigation-dots label[for='slide-3'],
#slide-4:checked ~ div.navigation-dots label[for='slide-4'] {
background-color: #3b82f6; /* A shade of blue for active dot */
transform: scale(1.4);
background-image: linear-gradient(to right, var(--tw-gradient-stops));
--tw-gradient-from: #14b8a6; /* teal-500 */
--tw-gradient-to: #3b82f6; /* blue-500 */
}
@media (prefers-color-scheme: dark) {
#slide-1:checked ~ div.navigation-dots label[for='slide-1'],
#slide-2:checked ~ div.navigation-dots label[for='slide-2'],
#slide-3:checked ~ div.navigation-dots label[for='slide-3'],
#slide-4:checked ~ div.navigation-dots label[for='slide-4'] {
--tw-gradient-from: #2dd4bf; /* teal-400 */
--tw-gradient-to: #60a5fa; /* blue-400 */
}
}
/* Define the order of slides logic for the carousel */
/* When slide-1 is checked: */
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none; /* Disable click on current slide */
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Far Right */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Left */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* When slide-2 is checked: */
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Far Right (now previous left) */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Left (now previous current) */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* When slide-3 is checked: */
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Far Right (was left) */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Left (was current) */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* When slide-4 is checked: */
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Far Right */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Left */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* Navigation dot active styling for actual dots */
div.navigation-dots label {
pointer-events: auto; /* Make dots clickable */
}
#slide-1:checked ~ .navigation-dots label[for='slide-1'],
#slide-2:checked ~ .navigation-dots label[for='slide-2'],
#slide-3:checked ~ .navigation-dots label[for='slide-3'],
#slide-4:checked ~ .navigation-dots label[for='slide-4'] {
background-color: #3b82f6; /* Tailwind blue-500 */
transform: scale(1.4);
}
/* Specific styling for the actual dots container */
.navigation-dots {
position: absolute;
bottom: 1rem; /* Adjust as needed */
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.75rem;
z-index: 20;
}
/* Mobile Responsiveness for translateX amounts */
@media (max-width: 767px) { /* Adjust for smaller mobile screens */
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Far Right */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Left */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
/* Apply similar adjustments for other checked states if needed */
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(3) {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(4) {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(4) {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(2) {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(2) {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(3) {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
/* Adjust slide width for extra small screens if needed */
.relative-carousel-wrapper label {
width: 90%; /* Make slides wider on small screens */
}
}
@media (min-width: 768px) and (max-width: 1023px) { /* Tablet adjustments */
.relative-carousel-wrapper label {
width: 60%; /* Adjust width for tablets */
}
}
/* New for the "navigation-dots" to contain dots */
.group-perspective-1000px input:checked + .relative-carousel-wrapper + .navigation-dots > label {
background-color: #9ca3af; /* Default gray for dots */
}
.group-perspective-1000px input#slide-1:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-1'],
.group-perspective-1000px input#slide-2:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-2'],
.group-perspective-1000px input#slide-3:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-3'],
.group-perspective-1000px input#slide-4:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-4'] {
background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
--tw-gradient-from: #14b8a6; /* teal-500 */
--tw-gradient-to: #3b82f6; /* blue-500 */
transform: scale(1.4);
}
@media (prefers-color-scheme: dark) {
.group-perspective-1000px input:checked + .relative-carousel-wrapper + .navigation-dots > label {
background-color: #4b5563; /* Dark gray for dots */
}
.group-perspective-1000px input#slide-1:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-1'],
.group-perspective-1000px input#slide-2:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-2'],
.group-perspective-1000px input#slide-3:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-3'],
.group-perspective-1000px input#slide-4:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-4'] {
--tw-gradient-from: #2dd4bf; /* dark teal-400 */
--tw-gradient-to: #60a5fa; /* dark blue-400 */
}
}
</style>Composants associés
Neumorphism E-commerce Carrousel Slider
Un composant de curseur de carrousel neumorphique réactif avec prise en charge du thème sombre pour le commerce électronique, à l’aide de Tailwind CSS. Il présente une palette de couleurs complémentaire. Aucun JavaScript n’est utilisé.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif avec prise en charge du mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript. Il présente une mise en page simple avec des couleurs vives pour la diapositive active, adaptée au blog ou à la consommation de contenu.
RetroCarrouselSlider
Un composant de curseur de carrousel simple, réactif et à thème rétro pour les sites Web d’entreprise, avec prise en charge du mode sombre et sans JavaScript.