slide

This tailwind example is contributed by Omer fils ELENGA, on 07-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Range Slider

Author Omer fils ELENGA

197

Fork Fullscreen

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollToPlugin.min.js"></script>
    <script>
      // Ajout d’un léger pulse global sur les SVG pour plus de vie
          gsap.to('.liquid-glow path', {
            duration: 8,
            strokeOpacity: 0.9,
            repeat: -1,
            yoyo: true,
            ease: "power1.inOut"
      });
    </script>
 
 
   <body  class="scroll-snap-align-start transition-colors duration-300" 
    x-data="{  
    currentSlide: 0,
    contactInfo: [
      { 
        icon: 'M21 0.833344C32.2758 0.833344 41.4166 9.9742 41.4166 21.25C41.4166 24.6593 40.5834 27.8717 39.1039 30.6983L21 62.0833L3.31538 31.4595C1.57498 28.4542 0.583313 24.9693 0.583313 21.25C0.583313 9.9742 9.72416 0.833344 21 0.833344ZM21 6.66668C12.9458 6.66668 6.41665 13.1959 6.41665 21.25C6.41665 23.566 6.95093 25.7882 7.96198 27.7943L8.45197 28.6893L21 50.4167L33.6366 28.5362C34.9071 26.3423 35.5833 23.8555 35.5833 21.25C35.5833 13.1959 29.0541 6.66668 21 6.66668ZM21 12.5C25.8325 12.5 29.75 16.4175 29.75 21.25C29.75 26.0825 25.8325 30 21 30C16.1675 30 12.25 26.0825 12.25 21.25C12.25 16.4175 16.1675 12.5 21 12.5ZM21 18.3333C19.3891 18.3333 18.0833 19.6392 18.0833 21.25C18.0833 22.8608 19.3891 24.1667 21 24.1667C22.6108 24.1667 23.9166 22.8608 23.9166 21.25C23.9166 19.6392 22.6108 18.3333 21 18.3333Z',
        title: 'Localisation',
        content: 'Brazzaville-Congo'
      },
      { 
        icon: 'M31.6458 11.9792C33.458 12.3327 35.2569 13.1319 36.5625 14.4375C37.8681 15.7431 38.6673 17.542 39.0208 19.3542M32.875 3.375C36.64 3.79326 40.028 5.61471 42.7083 8.29167C45.3887 10.9686 47.202 14.3605 47.625 18.125M47.6237 36.5051V43.1666C47.634 45.7131 45.3443 47.8395 42.7734 47.6077C20.5835 47.625 3.37515 30.2568 3.39252 8.21591C3.16097 5.65866 5.27686 3.37761 7.82008 3.37522H14.4948C15.5746 3.36461 16.6214 3.74621 17.4401 4.4489C19.7676 6.44667 21.2648 13.2274 20.6887 15.923C20.239 18.0276 18.1175 19.4999 16.6752 20.9394C19.8425 26.4985 24.4545 31.1014 30.0247 34.2624C31.467 32.823 32.9423 30.7057 35.051 30.2568C37.7561 29.6811 44.5805 31.1803 46.5702 33.5241C47.2758 34.3552 47.6507 35.4161 47.6237 36.5051Z',
        title: 'Appelez-nous',
        content: '(+242) 06 560 98 60'
      },
      { 
        icon: 'M3.91825 4.33491C4.40836 3.8448 5.08545 3.54166 5.83333 3.54166H49.1667C49.9146 3.54166 50.5916 3.8448 51.0817 4.33491M3.91825 4.33491C3.42814 4.82502 3.125 5.50211 3.125 6.24999V38.75C3.125 40.2458 4.33756 41.4583 5.83333 41.4583H49.1667C50.6624 41.4583 51.875 40.2458 51.875 38.75V6.24999C51.875 5.5021 51.5719 4.82502 51.0817 4.33491M3.91825 4.33491L23.6698 24.0864C25.7852 26.2017 29.2148 26.2017 31.3302 24.0864L51.0817 4.33491',
        title: 'Notre Email',
        content: 'visionit.officiel@gmail.com'
      }
    ],

// --- SLIDER TOUCH ---
  startX: 0,
  endX: 0,
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
  },
  handleTouchEnd(e) {
    this.endX = e.changedTouches[0].clientX;
    const diff = this.startX - this.endX;
    if (Math.abs(diff) > 50) {
      if (diff > 0) this.nextSlide();
      else this.prevSlide();
    }
  }, 
   
   nextSlide() {
    if (this.currentSlide < this.contactInfo.length - 1) {
      this.currentSlide++;
    } else {
      this.currentSlide = 0;
    }
  },
  prevSlide() {
    if (this.currentSlide > 0) {
      this.currentSlide--;
    } else {
      this.currentSlide = this.contactInfo.length - 1;
    }
  },
  goToSlide(index) {
    this.currentSlide = index;
  },
    
  }">
 <section class="sm:hidden relative" aria-label="Informations de contact">
        <div class="flex relative z-30 justify-center items-center mt-6 mx-auto max-w-[1300px] rounded-[90px] py-3 px-3 bg-gradient-to-r from-[#003366b8] via-[#178abe] to-[#179bbb]">
          
          <button @click="prevSlide()" class="flex-none p-2 text-white hover:opacity-80 transition-opacity" aria-label="Informations précédentes">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>

<div 
            class="slider-container flex-1 overflow-hidden px-2"
            @touchstart="handleTouchStart"
            @touchend="handleTouchEnd">
            <div 
              class="slider-wrapper flex transition-transform duration-300 ease-out"
              :style="`transform: translateX(-${currentSlide * 100}%)`">
              <template x-for="(info, index) in contactInfo" :key="index">
                <div class="slider-item flex-shrink-0 w-full flex items-center gap-3 px-2">
                  
                  <div class="flex-none w-10 h-10 flex items-center justify-center rounded-full bg-white/20">
                    <template x-if="info.title === 'Localisation'">
                      <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                      </svg>
                    </template>
                    <template x-if="info.title === 'Appelez-nous'">
                      <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                      </svg>
                    </template>
                    <template x-if="info.title === 'Notre Email'">
                      <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                      </svg>
                    </template>
                  </div>
                  <div class="text-white truncate">
                    <h2 class="text-base font-bold truncate" x-text="info.title"></h2>
                    <p class="text-xs mt-0.5 opacity-90 truncate" x-text="info.content"></p>
                  </div>
                </div>
              </template>
            </div>
          </div>

<button @click="nextSlide()" class="flex-none p-2 text-white hover:opacity-80 transition-opacity" aria-label="Informations suivantes">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>

<div class="flex justify-center mt-3 gap-2" role="tablist">
          <template x-for="(info, index) in contactInfo" :key="index">
            <button
              @click="goToSlide(index)"
              :class="currentSlide === index ? 'bg-white w-6' : 'bg-white bg-opacity-50 w-2'"
              class="slider-dot h-2 rounded-full transition-all duration-300"
              :aria-label="`Afficher ${info.title}`"
              :aria-selected="currentSlide === index"
              role="tab"></button>
          </template>
        </div>
      </section>

<section
          class="hidden sm:flex relative z-30 justify-between gap-5 items-center mt-6 mx-auto max-w-[1300px] rounded-[90px] py-3 px-3 sm:p-8 lg:p-14 bg-gradient-to-r from-[#003366b8] via-[#178abe] to-[#179bbb]"
          aria-label="Informations de contact">
          <div
            class="flex sm:flex-1 gap-4 lg:gap-6"
            itemscope
            itemtype="http://schema.org/Place">
            <svg
              width="42"
              height="63"
              viewBox="0 0 42 63"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="flex-none"
              aria-hidden="true">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M21 0.833344C32.2758 0.833344 41.4166 9.9742 41.4166 21.25C41.4166 24.6593 40.5834 27.8717 39.1039 30.6983L21 62.0833L3.31538 31.4595C1.57498 28.4542 0.583313 24.9693 0.583313 21.25C0.583313 9.9742 9.72416 0.833344 21 0.833344ZM21 6.66668C12.9458 6.66668 6.41665 13.1959 6.41665 21.25C6.41665 23.566 6.95093 25.7882 7.96198 27.7943L8.45197 28.6893L21 50.4167L33.6366 28.5362C34.9071 26.3423 35.5833 23.8555 35.5833 21.25C35.5833 13.1959 29.0541 6.66668 21 6.66668ZM21 12.5C25.8325 12.5 29.75 16.4175 29.75 21.25C29.75 26.0825 25.8325 30 21 30C16.1675 30 12.25 26.0825 12.25 21.25C12.25 16.4175 16.1675 12.5 21 12.5ZM21 18.3333C19.3891 18.3333 18.0833 19.6392 18.0833 21.25C18.0833 22.8608 19.3891 24.1667 21 24.1667C22.6108 24.1667 23.9166 22.8608 23.9166 21.25C23.9166 19.6392 22.6108 18.3333 21 18.3333Z"
                fill="#FFFFFF"></path>
            </svg>
            <div class="text-white">
              <h2 class="hidden sm:inline-block text-2xl font-bold">
                Notre Localisation
              </h2>
              <p class="text-sm mt-3" itemprop="address">Brazzaville-Congo</p>
            </div>
          </div>

<div
            class="hidden sm:flex flex-1 gap-4 lg:gap-6"
            itemscope
            itemtype="http://schema.org/ContactPoint">
            <svg
              width="51"
              height="51"
              viewBox="0 0 51 51"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="flex-none"
              aria-hidden="true">
              <path
                d="M31.6458 11.9792C33.458 12.3327 35.2569 13.1319 36.5625 14.4375C37.8681 15.7431 38.6673 17.542 39.0208 19.3542M32.875 3.375C36.64 3.79326 40.028 5.61471 42.7083 8.29167C45.3887 10.9686 47.202 14.3605 47.625 18.125M47.6237 36.5051V43.1666C47.634 45.7131 45.3443 47.8395 42.7734 47.6077C20.5835 47.625 3.37515 30.2568 3.39252 8.21591C3.16097 5.65866 5.27686 3.37761 7.82008 3.37522H14.4948C15.5746 3.36461 16.6214 3.74621 17.4401 4.4489C19.7676 6.44667 21.2648 13.2274 20.6887 15.923C20.239 18.0276 18.1175 19.4999 16.6752 20.9394C19.8425 26.4985 24.4545 31.1014 30.0247 34.2624C31.467 32.823 32.9423 30.7057 35.051 30.2568C37.7561 29.6811 44.5805 31.1803 46.5702 33.5241C47.2758 34.3552 47.6507 35.4161 47.6237 36.5051Z"
                stroke="#FFFFFF"
                stroke-width="6"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
            </svg>
            <div class="text-white">
              <h2 class="text-2xl font-bold">Appelez-nous</h2>
              <p class="text-sm mt-3" itemprop="telephone">
                (+242) 06 560 98 60
              </p>
            </div>
          </div>

<div
            class="hidden lg:flex flex-1 gap-4 lg:gap-6"
            itemscope
            itemtype="http://schema.org/ContactPoint">
            <svg
              width="55"
              height="45"
              viewBox="0 0 55 45"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="flex-none"
              aria-hidden="true">
              <path
                d="M3.91825 4.33491C4.40836 3.8448 5.08545 3.54166 5.83333 3.54166H49.1667C49.9146 3.54166 50.5916 3.8448 51.0817 4.33491M3.91825 4.33491C3.42814 4.82502 3.125 5.50211 3.125 6.24999V38.75C3.125 40.2458 4.33756 41.4583 5.83333 41.4583H49.1667C50.6624 41.4583 51.875 40.2458 51.875 38.75V6.24999C51.875 5.5021 51.5719 4.82502 51.0817 4.33491M3.91825 4.33491L23.6698 24.0864C25.7852 26.2017 29.2148 26.2017 31.3302 24.0864L51.0817 4.33491"
                stroke="#FFFFFF"
                stroke-width="6"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
            </svg>
            <div class="text-white">
              <h2 class="text-2xl font-bold">Notre Email</h2>
              <p class="text-sm mt-3" itemprop="email">
                visionit.officiel@gmail.com
              </p>
            </div>
          </div>
        </section>
   </body>

Related Examples

Card Slider

Author:
Maxim

10 months ago

1.5k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

8 months ago

1.1k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1k
mobil navigation
mobil navigation

Author:
Omer fils ELENGA

1 month ago

171
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

9 months ago

946
Tailwind Customize Slider
Test how to customize slider with tailwind css

Author:
yinyinkyaw

1 year ago

2.4k
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

1 month ago

291
slider models
Tailwind slider models

Author:
QQ-VVN

8 months ago

749
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

12.2k
Simple range slider

Author:
Nour Haider

2 years ago

15.5k
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

11 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components