Basic example
The Image Gallery component allows you to display a collection of related images on a page.
This component can display images as a simple slideshow , which is especially useful in the image gallery display mode where large groups of images are shown, as it displays the images as a grid of thumbnails.
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
<div class="-m-1 flex flex-wrap md:-m-2">
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(76).webp" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp" />
</div>
</div>
</div>
</div>
Mix
Use gallery mix to zoom in and highlight certain graphics.
.webp)
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-24">
<div class="-m-1 flex flex-wrap md:-m-2">
<div class="flex w-1/2 flex-wrap">
<div class="w-1/2 p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp" />
</div>
<div class="w-1/2 p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp" />
</div>
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp" />
</div>
</div>
<div class="flex w-1/2 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp" />
</div>
<div class="w-1/2 p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp" />
</div>
<div class="w-1/2 p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(77).webp" />
</div>
</div>
</div>
</div>
Carousel
Use carousel gallery to cycle through different elements such as photos, videos, or text.
.jpg)
First slide label
Some representative placeholder content for the first slide.
.jpg)
Second slide label
Some representative placeholder content for the second slide.
.jpg)
Third slide label
Some representative placeholder content for the third slide.
<div
id="carouselExampleCaptions"
class="relative"
data-twe-carousel-init
data-twe-carousel-slide>
<div
class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
data-twe-carousel-indicators>
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="0"
data-twe-carousel-active
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-current="true"
aria-label="Slide 1"></button>
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="1"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 2"></button>
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="2"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 3"></button>
</div>
<div
class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-active
data-twe-carousel-item
style="backface-visibility: hidden">
<div
class="relative overflow-hidden bg-cover bg-no-repeat"
style="background-position: 50%">
<img
src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(123).jpg"
class="block w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
</div>
<div
class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
<h5 class="text-xl">First slide label</h5>
<p>
Some representative placeholder content for the first slide.
</p>
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="backface-visibility: hidden">
<div
class="relative overflow-hidden bg-cover bg-no-repeat"
style="background-position: 50%">
<img
src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(124).jpg"
class="block w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
</div>
<div
class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
<h5 class="text-xl">Second slide label</h5>
<p>
Some representative placeholder content for the second slide.
</p>
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="backface-visibility: hidden">
<div
class="relative overflow-hidden bg-cover bg-no-repeat"
style="background-position: 50%">
<img
src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(125).jpg"
class="block w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
</div>
<div
class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
<h5 class="text-xl">Third slide label</h5>
<p>
Some representative placeholder content for the third slide.
</p>
</div>
</div>
</div>
<button
class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide="prev">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<button
class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide="next">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</div>
// Initialization for ES Users
import {
Carousel,
initTWE,
} from "tw-elements";
initTWE({ Carousel });
Related resources
Tutorials:
grid system
responsiveness
containers
hover state
fullscreen background image
dark mode
arbitrary values
flexbox
spacing
masks
ripple effect
carousel
rounded corners
sizing
Extended Docs:
colors
dividers
figures
hover effects
images
mask
shadows
headers
avatar
cards
carousel
jumbotron
video
video carousel
file input
ripple
background image
background position
columns
display flex
flexbox
grid gap
parallax
position
spacing