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

198

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

slider models
Tailwind slider models

Author:
QQ-VVN

8 months ago

754
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

4 days ago

6
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)

8 months ago

1.2k
Galerie Interactive
Galerie Interactive

Author:
Omer fils ELENGA

3 days ago

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

Author:
Alok

3 years ago

12.2k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

892
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

8 months ago

1.5k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

3 weeks ago

41
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

3 weeks ago

69
Simple range slider

Author:
Nour Haider

2 years ago

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

8 months ago

1k
Range Slider

Author:
Alok

3 years ago

14.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components