Carousels
A carousel is a design element used to display images and videos on your website. It works like a slideshow, showing more than one image or video at a time. The content changes after a few seconds or when the visitor clicks to view the next one.
Variations
Carousel with controls inside Requires GlideJS
Copy as:
<!-- Component: Carousel with controls inside -->
<div class="relative w-full glide-01">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="absolute left-0 flex items-center justify-between w-full h-0 px-4 top-1/2 " data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide01 = new Glide('.glide-01', {
type: 'carousel',
focusAt: 'center',
perView: 3,
autoplay: 3000,
animationDuration: 700,
gap: 24,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1
}
},
});
glide01.mount();
</script>
<!-- End Carousel with controls inside -->Controls Outside Requires GlideJS
Copy as:
<!-- Component: Carousel with controls outside -->
<div class="relative w-full glide-04">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="flex items-center justify-center w-full gap-2 p-4" data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide04 = new Glide('.glide-04', {
type: 'carousel',
focusAt: 'center',
perView: 3,
autoplay: 3500,
animationDuration: 700,
gap: 24,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1
}
},
});
glide04.mount();
</script>
<!-- End Carousel with controls outside -->Carousel with indicator outside Requires GlideJS
Copy as:
<!-- Component: Carousel with indicators outside -->
<div class="relative w-full glide-05">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Indicators -->
<div class="flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide05 = new Glide('.glide-05', {
type: 'carousel',
focusAt: 'center',
perView: 3,
autoplay: 3000,
animationDuration: 700,
gap: 24,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1
}
},
});
glide05.mount();
</script>
<!-- End Carousel with indicators outside -->Carousel with indicator inside Requires GlideJS
Copy as:
<!-- Component: Carousel with indicators inside -->
<div class="relative w-full glide-02">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Indicators -->
<div class="absolute bottom-0 flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide02 = new Glide('.glide-02', {
type: 'carousel',
focusAt: 'center',
perView: 3,
autoplay: 3500,
animationDuration: 700,
gap: 24,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1
}
},
});
glide02.mount();
</script>
<!-- End Carousel with indicators inside -->Carousel with indicator & controls inside Requires GlideJS
Copy as:
<!-- Component: Carousel with indicators & controls inside -->
<div class="relative w-full glide-03">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="absolute left-0 flex items-center justify-between w-full h-0 px-4 top-1/2 " data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
<!-- Indicators -->
<div class="absolute bottom-0 flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide03 = new Glide('.glide-03', {
type: 'carousel',
focusAt: 'center',
perView: 3,
autoplay: 3000,
animationDuration: 700,
gap: 24,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1
}
},
});
glide03.mount();
</script>
<!-- End Carousel with indicators & controls inside -->Carousel with cards Requires GlideJS
Copy as:
<!-- Component: Card Carousel -->
<div class="relative w-full overflow-hidden bg-white rounded shadow-xl shadow-slate-200 glide-06">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/carousel/carousel-image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="absolute left-0 flex items-center justify-between w-full h-0 px-4 top-1/2 " data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
<!-- Indicators -->
<div class="absolute bottom-0 flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide06 = new Glide('.glide-06', {
type: 'carousel',
focusAt: 'center',
perView: 3,
autoplay: 3000,
animationDuration: 700,
gap: 24,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1
}
},
});
glide06.mount();
</script>
<!-- End Card Carousel -->Testimonial CarouselRequires GlideJS
Copy as:
Wind-ui, is probably one of the best libraries I've came across. Good looking, easy to use and above all super accessible.
Bill GatesCEO, MicrosoftWind-ui components come with proper attributes to ensure full accessibility with the WAI-ARIA standards.
Jane SmithWAI-ARIA, RepresentativeYou can easily communicate with Wind-ui's team for support through their discord channel. They are responsive and ultra helpful guys!
Arnold JonesSoftware Engineer
<!-- Component: Testimonial carousel -->
<div class="relative w-full glide-08">
<!-- Slides -->
<div data-glide-el="track">
<ul class="whitespace-no-wrap flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform] relative flex w-full overflow-hidden p-0 pb-12">
<li>
<div class="w-full h-full">
<!-- Start Testimonial -->
<div class="h-full overflow-hidden bg-white rounded shadow-2xl text-slate-500 shadow-slate-200">
<div class="relative p-6">
<figure class="relative z-10">
<blockquote class="p-6 text-lg leading-relaxed">
<p>Wind-ui, is probably one of the best libraries I've came across. Good looking, easy to use and above all super accessible.</p>
</blockquote>
<figcaption class="flex flex-col items-start gap-2 p-6 pt-0 text-sm text-emerald-500">
<span class="flex gap-1 text-amber-400" role="img" aria-label="Rating: 3 out of 5 stars">
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</span>
</span>
<div class="flex items-center gap-4 pt-4 text-sm text-emerald-500">
<img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full shrink-0" />
<div class="flex flex-col gap-1">
<span class="font-bold uppercase">Bill Gates</span>
<cite class="not-italic"><a href="http://www.microsoft.com">CEO, Microsoft</a></cite>
</div>
</div>
</figcaption>
</figure>
<svg aria-hidden="true" class="absolute z-0 h-16 left-6 top-6" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.79187 3.83333C2.66179 3.83333 2.53696 3.85316 2.41271 3.87125C2.45296 3.73591 2.49437 3.59825 2.56087 3.47458C2.62737 3.29491 2.73121 3.13916 2.83446 2.98225C2.92079 2.8125 3.07304 2.69758 3.18504 2.55233C3.30229 2.41116 3.46212 2.31725 3.58871 2.2C3.71296 2.0775 3.87571 2.01625 4.00521 1.92991C4.14054 1.85233 4.25837 1.76658 4.38437 1.72575L4.69879 1.59625L4.97529 1.48133L4.69237 0.35083L4.34412 0.43483C4.23271 0.46283 4.09679 0.495496 3.94221 0.53458C3.78412 0.563746 3.61554 0.643663 3.42771 0.71658C3.24221 0.799413 3.02754 0.855413 2.82804 0.988413C2.62737 1.11558 2.39579 1.22175 2.19162 1.39208C1.99387 1.56766 1.75529 1.71991 1.57912 1.94333C1.38662 2.15216 1.19646 2.3715 1.04887 2.62116C0.877957 2.85916 0.761873 3.1205 0.639373 3.37891C0.52854 3.63733 0.43929 3.90158 0.366373 4.15825C0.228123 4.67275 0.16629 5.16158 0.142373 5.57983C0.12254 5.99866 0.134207 6.34691 0.158707 6.59891C0.167457 6.71791 0.18379 6.83341 0.195457 6.91333L0.21004 7.01133L0.225207 7.00783C0.328959 7.49248 0.567801 7.93786 0.914102 8.29243C1.2604 8.64701 1.70001 8.89631 2.18208 9.01148C2.66415 9.12665 3.16897 9.10299 3.63815 8.94323C4.10733 8.78348 4.52169 8.49416 4.83331 8.10874C5.14493 7.72333 5.34107 7.25757 5.39903 6.76534C5.457 6.27311 5.37443 5.77452 5.16087 5.32726C4.94731 4.88 4.61149 4.50233 4.19225 4.23796C3.77302 3.97358 3.28751 3.8333 2.79187 3.83333V3.83333ZM9.20854 3.83333C9.07846 3.83333 8.95362 3.85316 8.82937 3.87125C8.86962 3.73591 8.91104 3.59825 8.97754 3.47458C9.04404 3.29491 9.14787 3.13916 9.25112 2.98225C9.33746 2.8125 9.48971 2.69758 9.60171 2.55233C9.71896 2.41116 9.87879 2.31725 10.0054 2.2C10.1296 2.0775 10.2924 2.01625 10.4219 1.92991C10.5572 1.85233 10.675 1.76658 10.801 1.72575L11.1155 1.59625L11.392 1.48133L11.109 0.35083L10.7608 0.43483C10.6494 0.46283 10.5135 0.495496 10.3589 0.53458C10.2008 0.563746 10.0322 0.643663 9.84437 0.71658C9.65946 0.799997 9.44421 0.855413 9.24471 0.988997C9.04404 1.11616 8.81246 1.22233 8.60829 1.39266C8.41054 1.56825 8.17196 1.7205 7.99579 1.94333C7.80329 2.15216 7.61312 2.3715 7.46554 2.62116C7.29462 2.85916 7.17854 3.1205 7.05604 3.37891C6.94521 3.63733 6.85596 3.90158 6.78304 4.15825C6.64479 4.67275 6.58296 5.16158 6.55904 5.57983C6.53921 5.99866 6.55087 6.34691 6.57537 6.59891C6.58412 6.71791 6.60046 6.83341 6.61212 6.91333L6.62671 7.01133L6.64187 7.00783C6.74563 7.49248 6.98447 7.93786 7.33077 8.29243C7.67707 8.64701 8.11668 8.89631 8.59875 9.01148C9.08081 9.12665 9.58563 9.10299 10.0548 8.94323C10.524 8.78348 10.9384 8.49416 11.25 8.10874C11.5616 7.72333 11.7577 7.25757 11.8157 6.76534C11.8737 6.27311 11.7911 5.77452 11.5775 5.32726C11.364 4.88 11.0282 4.50233 10.6089 4.23796C10.1897 3.97358 9.70417 3.8333 9.20854 3.83333V3.83333Z" class="fill-emerald-50" />
</svg>
</div>
</div>
<!-- End Testimonial -->
</div>
</li>
<li>
<div class="w-full h-full">
<!-- Start Testimonial -->
<div class="h-full overflow-hidden bg-white rounded shadow-2xl text-slate-500 shadow-slate-200">
<div class="relative p-6">
<figure class="relative z-10">
<blockquote class="p-6 text-lg leading-relaxed">
<p>Wind-ui components come with proper attributes to ensure full accessibility with the WAI-ARIA standards.</p>
</blockquote>
<figcaption class="flex flex-col items-start gap-2 p-6 pt-0 text-sm text-emerald-500">
<span class="flex gap-1 text-amber-400" role="img" aria-label="Rating: 3 out of 5 stars">
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</span>
</span>
<div class="flex items-center gap-4 pt-4 text-sm text-emerald-500">
<img src="https://i.pravatar.cc/40?img=25" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full shrink-0" />
<div class="flex flex-col gap-1">
<span class="font-bold uppercase">Jane Smith</span>
<cite class="not-italic"><a href="http://www.microsoft.com">WAI-ARIA, Representative</a></cite>
</div>
</div>
</figcaption>
</figure>
<svg aria-hidden="true" class="absolute z-0 h-16 left-6 top-6" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.79187 3.83333C2.66179 3.83333 2.53696 3.85316 2.41271 3.87125C2.45296 3.73591 2.49437 3.59825 2.56087 3.47458C2.62737 3.29491 2.73121 3.13916 2.83446 2.98225C2.92079 2.8125 3.07304 2.69758 3.18504 2.55233C3.30229 2.41116 3.46212 2.31725 3.58871 2.2C3.71296 2.0775 3.87571 2.01625 4.00521 1.92991C4.14054 1.85233 4.25837 1.76658 4.38437 1.72575L4.69879 1.59625L4.97529 1.48133L4.69237 0.35083L4.34412 0.43483C4.23271 0.46283 4.09679 0.495496 3.94221 0.53458C3.78412 0.563746 3.61554 0.643663 3.42771 0.71658C3.24221 0.799413 3.02754 0.855413 2.82804 0.988413C2.62737 1.11558 2.39579 1.22175 2.19162 1.39208C1.99387 1.56766 1.75529 1.71991 1.57912 1.94333C1.38662 2.15216 1.19646 2.3715 1.04887 2.62116C0.877957 2.85916 0.761873 3.1205 0.639373 3.37891C0.52854 3.63733 0.43929 3.90158 0.366373 4.15825C0.228123 4.67275 0.16629 5.16158 0.142373 5.57983C0.12254 5.99866 0.134207 6.34691 0.158707 6.59891C0.167457 6.71791 0.18379 6.83341 0.195457 6.91333L0.21004 7.01133L0.225207 7.00783C0.328959 7.49248 0.567801 7.93786 0.914102 8.29243C1.2604 8.64701 1.70001 8.89631 2.18208 9.01148C2.66415 9.12665 3.16897 9.10299 3.63815 8.94323C4.10733 8.78348 4.52169 8.49416 4.83331 8.10874C5.14493 7.72333 5.34107 7.25757 5.39903 6.76534C5.457 6.27311 5.37443 5.77452 5.16087 5.32726C4.94731 4.88 4.61149 4.50233 4.19225 4.23796C3.77302 3.97358 3.28751 3.8333 2.79187 3.83333V3.83333ZM9.20854 3.83333C9.07846 3.83333 8.95362 3.85316 8.82937 3.87125C8.86962 3.73591 8.91104 3.59825 8.97754 3.47458C9.04404 3.29491 9.14787 3.13916 9.25112 2.98225C9.33746 2.8125 9.48971 2.69758 9.60171 2.55233C9.71896 2.41116 9.87879 2.31725 10.0054 2.2C10.1296 2.0775 10.2924 2.01625 10.4219 1.92991C10.5572 1.85233 10.675 1.76658 10.801 1.72575L11.1155 1.59625L11.392 1.48133L11.109 0.35083L10.7608 0.43483C10.6494 0.46283 10.5135 0.495496 10.3589 0.53458C10.2008 0.563746 10.0322 0.643663 9.84437 0.71658C9.65946 0.799997 9.44421 0.855413 9.24471 0.988997C9.04404 1.11616 8.81246 1.22233 8.60829 1.39266C8.41054 1.56825 8.17196 1.7205 7.99579 1.94333C7.80329 2.15216 7.61312 2.3715 7.46554 2.62116C7.29462 2.85916 7.17854 3.1205 7.05604 3.37891C6.94521 3.63733 6.85596 3.90158 6.78304 4.15825C6.64479 4.67275 6.58296 5.16158 6.55904 5.57983C6.53921 5.99866 6.55087 6.34691 6.57537 6.59891C6.58412 6.71791 6.60046 6.83341 6.61212 6.91333L6.62671 7.01133L6.64187 7.00783C6.74563 7.49248 6.98447 7.93786 7.33077 8.29243C7.67707 8.64701 8.11668 8.89631 8.59875 9.01148C9.08081 9.12665 9.58563 9.10299 10.0548 8.94323C10.524 8.78348 10.9384 8.49416 11.25 8.10874C11.5616 7.72333 11.7577 7.25757 11.8157 6.76534C11.8737 6.27311 11.7911 5.77452 11.5775 5.32726C11.364 4.88 11.0282 4.50233 10.6089 4.23796C10.1897 3.97358 9.70417 3.8333 9.20854 3.83333V3.83333Z" class="fill-emerald-50" />
</svg>
</div>
</div>
<!-- End Testimonial -->
</div>
</li>
<li>
<div class="w-full h-full">
<!-- Start Testimonial -->
<div class="h-full overflow-hidden bg-white rounded shadow-2xl text-slate-500 shadow-slate-200">
<div class="relative p-6">
<figure class="relative z-10">
<blockquote class="p-6 text-lg leading-relaxed">
<p>You can easily communicate with Wind-ui's team for support through their discord channel. They are responsive and ultra helpful guys!</p>
</blockquote>
<figcaption class="flex flex-col items-start gap-2 p-6 pt-0 text-sm text-emerald-500">
<span class="flex gap-1 text-amber-400" role="img" aria-label="Rating: 3 out of 5 stars">
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</span>
</span>
<div class="flex items-center gap-4 pt-4 text-sm text-emerald-500">
<img src="https://i.pravatar.cc/40?img=7" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full shrink-0" />
<div class="flex flex-col gap-1">
<span class="font-bold uppercase">Arnold Jones</span>
<cite class="not-italic"><a href="http://www.microsoft.com">Software Engineer</a></cite>
</div>
</div>
</figcaption>
</figure>
<svg aria-hidden="true" class="absolute z-0 h-16 left-6 top-6" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.79187 3.83333C2.66179 3.83333 2.53696 3.85316 2.41271 3.87125C2.45296 3.73591 2.49437 3.59825 2.56087 3.47458C2.62737 3.29491 2.73121 3.13916 2.83446 2.98225C2.92079 2.8125 3.07304 2.69758 3.18504 2.55233C3.30229 2.41116 3.46212 2.31725 3.58871 2.2C3.71296 2.0775 3.87571 2.01625 4.00521 1.92991C4.14054 1.85233 4.25837 1.76658 4.38437 1.72575L4.69879 1.59625L4.97529 1.48133L4.69237 0.35083L4.34412 0.43483C4.23271 0.46283 4.09679 0.495496 3.94221 0.53458C3.78412 0.563746 3.61554 0.643663 3.42771 0.71658C3.24221 0.799413 3.02754 0.855413 2.82804 0.988413C2.62737 1.11558 2.39579 1.22175 2.19162 1.39208C1.99387 1.56766 1.75529 1.71991 1.57912 1.94333C1.38662 2.15216 1.19646 2.3715 1.04887 2.62116C0.877957 2.85916 0.761873 3.1205 0.639373 3.37891C0.52854 3.63733 0.43929 3.90158 0.366373 4.15825C0.228123 4.67275 0.16629 5.16158 0.142373 5.57983C0.12254 5.99866 0.134207 6.34691 0.158707 6.59891C0.167457 6.71791 0.18379 6.83341 0.195457 6.91333L0.21004 7.01133L0.225207 7.00783C0.328959 7.49248 0.567801 7.93786 0.914102 8.29243C1.2604 8.64701 1.70001 8.89631 2.18208 9.01148C2.66415 9.12665 3.16897 9.10299 3.63815 8.94323C4.10733 8.78348 4.52169 8.49416 4.83331 8.10874C5.14493 7.72333 5.34107 7.25757 5.39903 6.76534C5.457 6.27311 5.37443 5.77452 5.16087 5.32726C4.94731 4.88 4.61149 4.50233 4.19225 4.23796C3.77302 3.97358 3.28751 3.8333 2.79187 3.83333V3.83333ZM9.20854 3.83333C9.07846 3.83333 8.95362 3.85316 8.82937 3.87125C8.86962 3.73591 8.91104 3.59825 8.97754 3.47458C9.04404 3.29491 9.14787 3.13916 9.25112 2.98225C9.33746 2.8125 9.48971 2.69758 9.60171 2.55233C9.71896 2.41116 9.87879 2.31725 10.0054 2.2C10.1296 2.0775 10.2924 2.01625 10.4219 1.92991C10.5572 1.85233 10.675 1.76658 10.801 1.72575L11.1155 1.59625L11.392 1.48133L11.109 0.35083L10.7608 0.43483C10.6494 0.46283 10.5135 0.495496 10.3589 0.53458C10.2008 0.563746 10.0322 0.643663 9.84437 0.71658C9.65946 0.799997 9.44421 0.855413 9.24471 0.988997C9.04404 1.11616 8.81246 1.22233 8.60829 1.39266C8.41054 1.56825 8.17196 1.7205 7.99579 1.94333C7.80329 2.15216 7.61312 2.3715 7.46554 2.62116C7.29462 2.85916 7.17854 3.1205 7.05604 3.37891C6.94521 3.63733 6.85596 3.90158 6.78304 4.15825C6.64479 4.67275 6.58296 5.16158 6.55904 5.57983C6.53921 5.99866 6.55087 6.34691 6.57537 6.59891C6.58412 6.71791 6.60046 6.83341 6.61212 6.91333L6.62671 7.01133L6.64187 7.00783C6.74563 7.49248 6.98447 7.93786 7.33077 8.29243C7.67707 8.64701 8.11668 8.89631 8.59875 9.01148C9.08081 9.12665 9.58563 9.10299 10.0548 8.94323C10.524 8.78348 10.9384 8.49416 11.25 8.10874C11.5616 7.72333 11.7577 7.25757 11.8157 6.76534C11.8737 6.27311 11.7911 5.77452 11.5775 5.32726C11.364 4.88 11.0282 4.50233 10.6089 4.23796C10.1897 3.97358 9.70417 3.8333 9.20854 3.83333V3.83333Z" class="fill-emerald-50" />
</svg>
</div>
</div>
<!-- End Testimonial -->
</div>
</li>
</ul>
</div>
<!-- Indicators -->
<div class="flex items-center justify-center w-full gap-2 -mt-6" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full opacity-70 ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full opacity-70 ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full opacity-70 ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide07 = new Glide('.glide-08', {
type: 'carousel',
focusAt: 1,
animationDuration: 4000,
autoplay: 4500,
autoplay: true,
rewind: true,
perView: 2,
gap: 48
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1
}
},
});
glide07.mount();
</script>
<!-- End Testimonial carousel -->Logo CarouselRequires GlideJS
Copy as:
<!-- Component: Logos carousel -->
<div class="relative w-full glide-09">
<!-- Slides -->
<div data-glide-el="track">
<ul class="whitespace-no-wrap flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform] relative flex w-full overflow-hidden p-0 pb-12">
<li>
<img src="https://Tailwindmix.b-cdn.net/carousel/logos/carousel-logo-image-1.svg" class="w-auto h-20 max-w-full max-h-full m-auto " />
</li>
<li>
<img src="https://Tailwindmix.b-cdn.net/carousel/logos/carousel-logo-image-2.svg" class="w-auto h-20 max-w-full max-h-full m-auto " />
</li>
<li>
<img src="https://Tailwindmix.b-cdn.net/carousel/logos/carousel-logo-image-3.svg" class="w-auto h-20 max-w-full max-h-full m-auto " />
</li>
<li>
<img src="https://Tailwindmix.b-cdn.net/carousel/logos/carousel-logo-image-4.svg" class="w-auto h-20 max-w-full max-h-full m-auto " />
</li>
<li>
<img src="https://Tailwindmix.b-cdn.net/carousel/logos/carousel-logo-image-5.svg" class="w-auto h-20 max-w-full max-h-full m-auto " />
</li>
<li>
<img src="https://Tailwindmix.b-cdn.net/carousel/logos/carousel-logo-image-6.svg" class="w-auto h-20 max-w-full max-h-full m-auto " />
</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide09 = new Glide('.glide-09', {
type: 'carousel',
autoplay: 1,
animationDuration: 4500,
animationTimingFunc: 'linear',
perView: 3,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
breakpoints: {
1024: {
perView: 2
},
640: {
perView: 1,
gap: 36
}
},
});
glide09.mount();
</script>
<!-- End Logos carousel -->Usage
Use the carousel component to view multiple pieces of content that occupies a single coveted space:
- To enable more than one piece of content to occupy the same piece of real estate on the app interface.
- To display a group of content on the same level (set of images, users testimonials etc.)
The carousels functionality is implemented using GlideJS. GlideJS CDN is used in all HTML files and the React components are using the @glidejs/glide as a dependency.
Specs
The carousel component consists of the following elements:
- The list of elements that will slide
- The navigation arrows (3rem (48px) in width and height) to provide enough space for reliable interaction
- The slide indicators (2.5rem(40px) touch area with 0.5rem(8px) dots) that displays the total number of slides and the active slide.
Both indicators and navigation arrows can be placed within or outside the slide area.
Accessibility notes
All images should use the alt to be able to be accessible from screen readers.