カルーセルスライダーコンポーネント
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 を使用します。
HTMLコード
<section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
<div class="flex flex-col items-center justify-center max-w-screen-lg">
<div class="flex items-center justify-center w-full h-auto">
<div class="w-full h-full carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<label for="carousel-3" class="carousel-control prev control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-2" class="carousel-control next control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-1" class="carousel-control prev control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-3" class="carousel-control next control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-2" class="carousel-control prev control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-1" class="carousel-control next control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
</div>
</div>
</div>
</div>
<style>
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
visibility: hidden;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.carousel-open:checked ~ .carousel-item:not(.carousel-item) {
opacity: 0;
}
.carousel-open:checked ~ .control-1,
.carousel-open:checked ~ .control-2,
.carousel-open:checked ~ .control-3 {
display: flex;
}
.carousel-control {
z-index: 1;
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
width: 10%;
cursor: pointer;
opacity: 50%;
transition: opacity 150ms ease-in-out;
}
.carousel-control:hover {
opacity: 100%;
}
.control-1,
.control-2,
.control-3 {
width: 5vh;
height: 5vh;
border-radius: 50%;
position: absolute;
}
.control-1 {
top: 45%;
left: 5%;
}
.control-2 {
top: 45%;
right: 5%;
}
.control-3 {
top: 45%;
left: 5%;
}
</style>
</section>関連コンポーネント
Neumorphism Eコマースカルーセルスライダー
Tailwind CSSを使用した、eコマースのダークテーマをサポートするレスポンシブなNeumorphicカルーセルスライダーコンポーネント。補色配色が特徴です。JavaScriptは使用しておりません。
カルーセルスライダーコンポーネント
ブログやコンテンツの消費用に設計されたミニマリストのカルーセルスライダーコンポーネントで、トライアドの配色とダークテーマをサポートするレスポンシブデザインが特徴です。
カルーセルスライダーコンポーネント
Tailwind CSS を使用してブルータリズム スタイルで設計されたレスポンシブ カルーセル スライダー コンポーネントで、ハイ コントラスト、珍しいレイアウト、ダーク テーマのサポートが特徴です。