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

3k

10

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

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

1 month ago

747
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

1 week ago

134
User product review card

Author:
Brandon D

1 year ago

13.4k
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

9.7k
Testimonial wall
added light mode support

Author:
yousef

1 year ago

2.7k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

19.2k
Custom Carosel

Author:
Md. Tofayel islam

8 months ago

2k
Image Carousel

Author:
Nikolai

1 year ago

6k
Tailwind testimonials section

Author:
Kofi Osei

2 years ago

12.1k
tailwind testimonial card

Author:
Ron Hicks

2 years ago

9.5k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

5 days ago

12
Testimonial section
Gradient background and a testimonial quote with a highlighted phrase. The testimonial includes an image, name, and occupation.

Author:
Carla Hoffman

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1