CCHub Logo CCHub Tailwind Collection
コンポーネント カルーセルスライダー カルーセル スライダー コンポーネント 28

カルーセル スライダー コンポーネント 28

レスポンシブデザインとダークテーマのサポートを特徴とするミニマルなカルーセルスライダーコンポーネント。

プレビュー

HTMLコード 

<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>

関連コンポーネント

カルーセルスライダーコンポーネント

Tailwind CSS を使用して「ポートフォリオ - 作品や製品を展示する」という目的のために、デザイン スタイル「Neumorphism - 微妙な影を使用して背景から押し出されるように見える要素を作成するソフト UI スタイル」と、カラースキーム「Complementary - Color Wheel 上で互いに反対の色」と複雑度レベルの「Complex - Rich interface with multiple interactive elements」を使用して、Web コンポーネント Carousel Slider コンポーネントを実装します。ダークテーマをサポートするレスポンシブデザインを作成します。JavaScript コードは必要なく、Tailwind クラスを含む HTML のみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像が必要な場合は、画像には picsum.photos を、アバターには randomuser.me を使用します。

開ける

Brutalism カルーセル スライダー コンポーネント

Tailwind CSS、応答性、ダークモードを備えたブルータリズムカルーセルスライダー。ナビゲーションボタンを含み、プレースホルダー画像を使用します。

開ける

3Dカルーセルスライダー

3Dデザインスタイルとソーシャルメディアインターフェース用のパステルカラースキームを備えたシンプルで応答性の高いカルーセルスライダーで、ダークモードをサポートします。

開ける