Home
Md. Tofayel islam
Custom Carosel

Custom Carosel

This tailwind example is contributed by Md. Tofayel islam, on 17-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button Carousel Input Hover

Author Md. Tofayel islam

2.4k

6

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>Custom Carousel</h1>
 
   </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 justify-end 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>
 </div>
</section>

Related Examples

Button with hover to button shadow
A beautiful button with a special shadow

Author:
Zayed Hossain

11 months ago

1.3k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

12.3k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

1 year ago

2.2k
tradition music
by salvator

Author:
Baraka Salvator

3 months ago

544
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

5 months ago

574
Back to top button

Author:
Rafferty Kim

2 years ago

14.6k
Float Input

Author:
Maxim

1 year ago

3.9k
Glowing gradient border
on hover glow border

Author:
Prashant

3 years ago

23.5k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.8k
Floating feedback button

Author:
Livia Flores

2 years ago

12.4k
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

11 months ago

1.5k
Linkedin
chatting

Author:
Rebecca IRANKUNDA

3 months ago

473

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