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

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

Tailwind CSS を使用してブルータリズム スタイルで設計されたレスポンシブ カルーセル スライダー コンポーネントで、ハイ コントラスト、珍しいレイアウト、ダーク テーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="relative w-full h-64 overflow-hidden bg-gray-800" data-theme="dark">
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="absolute w-full h-full bg-gray-800 transition duration-300 ease-in-out transform scale-110 opacity-75"></div>
        <div class="carousel-slide transition-all duration-500 ease-in-out transform space-x-4">
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1">
                <p class="text-white mt-2">Slide 1</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2">
                <p class="text-white mt-2">Slide 2</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3">
                <p class="text-white mt-2">Slide 3</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=4" alt="Carousel Image 4">
                <p class="text-white mt-2">Slide 4</p>
            </div>
        </div>
    </div>
    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❮
    </button>
    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❯
    </button>
</div>
<style>
    [data-theme="dark"] {
        background-color: #1a202c;
    }
</style>

関連コンポーネント

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

企業/プロのトライアドカラースキームを備えた複雑で応答性の高いカルーセルスライダーコンポーネントで、天気/気候データを表示するように設計されています。ダークモードのサポートが含まれており、セマンティックHTMLを使用します。

開ける

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

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

開ける

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

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 を使用します。

開ける