Composants Curseur de carrousel Curseur de carrousel Composant 28

Curseur de carrousel Composant 28

Un composant de curseur de carrousel minimaliste doté d’un design réactif et d’une prise en charge du thème sombre.

Aperçu

HTML Code

<div class="relative bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3" class="w-full h-auto" />
            </div>
        </div>
    </div>
    <div class="absolute inset-0 flex items-center justify-between p-4">
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10094;
        </button>
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10095;
        </button>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1F2937;
        }
        .hover\:bg-gray-600:hover {
            background-color: #4B5563;
        }
    }
</style>

Composants associés

Composant de curseur de carrousel

Un composant de curseur de carrousel complexe, de style rétro/vintage, pour les plates-formes éducatives, avec des couleurs sourdes, un design professionnel et une réactivité totale avec prise en charge du mode sombre. Conçu pour les environnements d’entreprise/professionnels.

Ouvrir

Curseur de carrousel de neumorphisme

Composant de curseur de carrousel réactif avec style Neumorphism, palette de couleurs pastel, complexité modérée, objectif de médias sociaux et prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Composant de curseur de carrousel

Un composant de curseur de carrousel simple et réactif avec l’esthétique de Material Design, les tons sépia/brun et la prise en charge du mode sombre, adapté à un portfolio. N’utilise pas de JavaScript, ce qui en fait un composant purement basé sur CSS.

Ouvrir