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

1.9k

1

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

Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

2 years ago

16.5k
Nice and simple carousel
Nice and simple carousel, fully responsive.

Author:
dev cheick

8 months ago

2.4k
Dismissible Buttons

Author:
Manon Daniel

2 years ago

8.8k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

9 months ago

3.1k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 month ago

83
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

20 hours ago

7
Old style Button Designs

Author:
Amit Pachange

2 years ago

9.2k
Single Input newsletter form

Author:
Task Master

2 years ago

10k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.2k
YouTube subscription button

Author:
Shakti

2 years ago

10.5k
Textarea input
Fancy Textarea

Author:
Piet Vriend

2 years ago

10.2k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

2 months ago

626

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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