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 v3.4. It is responsive. similar terms for this example are endorsement,review

Carousel Testimonial

Author Michael Andreuzza

Tailwind v3.4 4.3k 14

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

633
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k
Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.4k
Slider
Responsive slider

Abhiraj

1 year ago

3k
User testimonial/review section

Sophia Baker

3 years ago

16.5k
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
User review cards
Resposive testemonial cards

Erik Hyatt

3 years ago

15.9k
Review Cards
Multiple rounded cards with user names, comments, and star ratings.

Hyun-woo Cho

3 years ago

9k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Testimonial Card

Anonymous

1 year ago

1.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.