Home
Michael Andreuzza
How to create a carousel with Tailwind CSS and Alpinejs

How to create a carousel with Tailwind CSS and Alpinejs

How to create a carousel with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review

Carousel Testimonial

Author Michael Andreuzza

3.6k

12

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section class="bg-white">
 <div class="w-full mx-auto max-w-xl flex flex-col justify-center py-24 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl">
   <div>
    <h1>Carousel</h1>
    <p class="text-balance">somegthing</p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-xl mx-auto">
   
   <div class="flex flex-col w-full" x-data="{
        skip: 1,
        atBeginning: false,
        atEnd: false,
        next() {
            this.to((current, offset) => current + (offset * this.skip))
        },
        prev() {
            this.to((current, offset) => current - (offset * this.skip))
        },
        to(strategy) {
            let slider = this.$refs.slider
            let current = slider.scrollLeft
            let offset = slider.firstElementChild.getBoundingClientRect().width
            slider.scrollTo({ left: strategy(current, offset), behavior: 'smooth' })
        },
        focusableWhenVisible: {
            'x-intersect:enter'() {
                this.$el.removeAttribute('tabindex')
            },
            'x-intersect:leave'() {
                this.$el.setAttribute('tabindex', '-1')
            },
        },
        disableNextAndPreviousButtons: {
            'x-intersect:enter.threshold.05'() {
                let slideEls = this.$el.parentElement.children
                // If this is the first slide.
                if (slideEls[0] === this.$el) {
                    this.atBeginning = true
                // If this is the last slide.
                } else if (slideEls[slideEls.length-1] === this.$el) {
                    this.atEnd = true
                }
            },
            'x-intersect:leave.threshold.05'() {
                let slideEls = this.$el.parentElement.children
                // If this is the first slide.
                if (slideEls[0] === this.$el) {
                    this.atBeginning = false
                // If this is the last slide.
                } else if (slideEls[slideEls.length-1] === this.$el) {
                    this.atEnd = false
                }
            },
        },
    }">
    <div class="flex flex-col w-full" aria-labelledby="carousel-label" role="region" tabindex="0" x-on:keydown.left="prev" x-on:keydown.right="next">
     <h2 class="sr-only" hidden="" id="carousel-label">
      Carousel
     </h2> <span class="sr-only" hidden="" id="carousel-content-label">Carousel</span>
     <div class="items-center inline-flex lg:px-2 space-x-2"> <button class="bg-orange-500 hover:bg-orange-600 size-8 flex focus:bg-orange-400 rounded-full items-center text-white opacity-50" :class="{ 'opacity-50 ': atBeginning }" :aria-disabled="atBeginning" :tabindex="atEnd ? -1 : 0" x-on:click="prev" tabindex="0" aria-disabled="true"><span aria-hidden="true" class="mx-auto">
        ←
       </span><span class="sr-only">Skip to previous slide page</span></button> <button class="bg-orange-500 hover:bg-orange-600 size-8 flex focus:bg-orange-400 rounded-full items-center text-white" :class="{ 'opacity-50 ': atEnd }" :aria-disabled="atEnd" :tabindex="atEnd ? -1 : 0" x-on:click="next" tabindex="0"><span aria-hidden="true" class="mx-auto">
        →
       </span><span class="sr-only">Skip to next slide page</span></button> </div>
     <ul class="flex gap-3 overflow-x-scroll mt-4 scrollbar-hide snap-mandatory snap-x w-full rounded-2xl" role="listbox" aria-labelledby="carousel-content-label" tabindex="0" x-ref="slider">
      <li class="items-center justify-center w-full flex flex-col shrink-0 snap-start h-full p-8 rounded-2xl lg:p-10 bg-gray-100" role="option" x-bind="disableNextAndPreviousButtons">
       <figure>
        <div class="max-w-2xl">
         <div class="flex flex-col gap-12">
          <p class="text-base text-gray-900 font-display text-balance">
           "I've been using this services for years, and they
           consistently exceed my expectations. The support team is
           fantastic! "
          </p>
          <div class="block flex-shrink-0">
           <div class="flex items-center">
            <div> <img class="inline-block h-9 w-9 rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&amp;w=2960&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> </div>
            <div class="ml-3">
             <p class="text-sm font-medium text-gray-700">
              Pepe Madrid
             </p>
             <p class="text-xs font-medium text-gray-500">
              CEO of Something INC
             </p>
            </div>
           </div>
          </div>
         </div>
        </div>
       </figure>
      </li>
      <li class="items-center justify-center w-full flex flex-col shrink-0 snap-start h-full p-8 rounded-2xl lg:p-10 bg-gray-100" role="option" x-bind="disableNextAndPreviousButtons">
       <figure>
        <div class="max-w-2xl">
         <div class="flex flex-col gap-12">
          <p class="text-base text-gray-900 font-display text-balance">
           "The financial solutions they offer are top-notch. I've
           seen significant growth in my investments since I
           started using their platform. "
          </p>
          <div class="block flex-shrink-0">
           <div class="flex items-center">
            <div> <img class="inline-block h-9 w-9 rounded-full object-cover object-center" src="https://alfred.lexingtonthemes.com/avatar1.png" alt=""> </div>
            <div class="ml-3">
             <p class="text-sm font-medium text-gray-700">
              Michael Andreuzza
             </p>
             <p class="text-xs font-medium text-gray-500">
              CEO of Something INC
             </p>
            </div>
           </div>
          </div>
         </div>
        </div>
       </figure>
      </li>
      <li class="items-center justify-center w-full flex flex-col shrink-0 snap-start h-full p-8 rounded-2xl lg:p-10 bg-gray-100" role="option" x-bind="disableNextAndPreviousButtons">
       <figure>
        <div class="max-w-2xl">
         <div class="flex flex-col gap-12">
          <p class="text-base text-gray-900 font-display text-balance">
           "Their customer service is unparalleled. They really go
           the extra mile to ensure customer satisfaction. "
          </p>
          <div class="block flex-shrink-0">
           <div class="flex items-center">
            <div> <img class="inline-block h-9 w-9 rounded-full object-cover object-center" src="https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?q=80&amp;w=2940&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> </div>
            <div class="ml-3">
             <p class="text-sm font-medium text-gray-700">
              Fernando Pio
             </p>
             <p class="text-xs font-medium text-gray-500">
              CEO of Something INC
             </p>
            </div>
           </div>
          </div>
         </div>
        </div>
       </figure>
      </li>
     </ul>
    </div>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        How to create a carousel with Tailwind CSS and Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-600 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-carousel-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/carousel/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

6 months ago

1.4k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

4 months ago

936
Slider
Responsive slider

Author:
Abhiraj

8 months ago

2k
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

Author:
INGRIDE MUZIRANENGE

4 months ago

280
Testimonials
Testimonial Card for landing pages.

Author:
Prashant

3 years ago

11k
Testimonial Section with Gradient Background
The section includes a company logo at the top, a customer testimonial in the center, and the author's name and position at the bottom.

Author:
Elsabe Fourie

1 year ago

8k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

3 months ago

221
User review cards
Resposive testemonial cards

Author:
Erik Hyatt

2 years ago

14.9k
Simple testimonial

Author:
Samuel Dawson

2 years ago

11.1k
Tailwind CSS Testimonial Slider
Descriptive background image with Testimonial Slider .

Author:
Bernard Omuse

1 year ago

2.1k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

31.1k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

9 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12