Carousel with only Tailwind CSS + Alpine.js

PHOTO

Wed Nov 29 2023 15:01:49 GMT+0000 (Coordinated Universal Time)

<div class="bg-teal-100 h-screen flex flex-col justify-center items-center">
  
  <div 
    class="max-w-4xl mx-auto relative"
    x-data="{ activeSlide: 1, slides: [1, 2, 3, 4, 5] }"
   >
    <!-- Slides -->
    <template x-for="slide in slides" :key="slide">
      <div
         x-show="activeSlide === slide"
         class="p-24 font-bold text-5xl h-64 flex items-center bg-teal-500 text-white rounded-lg">
        <span class="w-12 text-center" x-text="slide"></span>
        <span class="text-teal-300">/</span>
        <span class="w-12 text-center" x-text="slides.length"></span>
      </div>
    </template>
    
    <!-- Prev/Next Arrows -->
    <div class="absolute inset-0 flex">
      <div class="flex items-center justify-start w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow-lg rounded-full w-12 h-12 -ml-6"
          x-on:click="activeSlide = activeSlide === 1 ? slides.length : activeSlide - 1">
          &#8592;
         </button>
      </div>
      <div class="flex items-center justify-end w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow rounded-full w-12 h-12 -mr-6"
          x-on:click="activeSlide = activeSlide === slides.length ? 1 : activeSlide + 1">
          &#8594;
        </button>
      </div>        
    </div>

    <!-- Buttons -->
    <div class="absolute w-full flex items-center justify-center px-4">
      <template x-for="slide in slides" :key="slide">
        <button
          class="flex-1 w-4 h-2 mt-4 mx-2 mb-0 rounded-full overflow-hidden transition-colors duration-200 ease-out hover:bg-teal-600 hover:shadow-lg"
          :class="{ 
              'bg-orange-600': activeSlide === slide,
              'bg-teal-300': activeSlide !== slide 
          }" 
          x-on:click="activeSlide = slide"
        ></button>
      </template>
    </div>
  </div>
  
  </div>
</div>

COPY

Save snippets that work from anywhere online with our extensions

Comments

AlpineJS

@AlexP

Carousel with only Tailwind CSS + Alpine.js Image gallery Lightbox modal Alpinejs store accessible from outside Select Field with Search - AlpineJs + Tailwind

#alpinejs #tailwind

<button x-cloak x-data="{scroll : false}" @scroll.window="document.documentElement.scrollTop > 20 ? scroll = true : scroll = false" x-show="scroll" @click="window.scrollTo({top: 0, behavior: 'smooth'})" type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" class="fixed inline-block p-3 text-xs font-medium leading-tight text-white uppercase transition duration-150 ease-in-out bg-blue-600 rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg bottom-5 right-5" id="btn-back-to-top" x-transition.opacity>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
</button>

#html #alpinejs

Set boolean to true after scrolling on page using Alpine.js

<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>

#shop #alpinejs

Carousel with only Tailwind CSS + Alpine.js

<div class="bg-teal-100 h-screen flex flex-col justify-center items-center">
  
  <div 
    class="max-w-4xl mx-auto relative"
    x-data="{ activeSlide: 1, slides: [1, 2, 3, 4, 5] }"
   >
    <!-- Slides -->
    <template x-for="slide in slides" :key="slide">
      <div
         x-show="activeSlide === slide"
         class="p-24 font-bold text-5xl h-64 flex items-center bg-teal-500 text-white rounded-lg">
        <span class="w-12 text-center" x-text="slide"></span>
        <span class="text-teal-300">/</span>
        <span class="w-12 text-center" x-text="slides.length"></span>
      </div>
    </template>
    
    <!-- Prev/Next Arrows -->
    <div class="absolute inset-0 flex">
      <div class="flex items-center justify-start w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow-lg rounded-full w-12 h-12 -ml-6"
          x-on:click="activeSlide = activeSlide === 1 ? slides.length : activeSlide - 1">
          &#8592;
         </button>
      </div>
      <div class="flex items-center justify-end w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow rounded-full w-12 h-12 -mr-6"
          x-on:click="activeSlide = activeSlide === slides.length ? 1 : activeSlide + 1">
          &#8594;
        </button>
      </div>        
    </div>

    <!-- Buttons -->
    <div class="absolute w-full flex items-center justify-center px-4">
      <template x-for="slide in slides" :key="slide">
        <button
          class="flex-1 w-4 h-2 mt-4 mx-2 mb-0 rounded-full overflow-hidden transition-colors duration-200 ease-out hover:bg-teal-600 hover:shadow-lg"
          :class="{ 
              'bg-orange-600': activeSlide === slide,
              'bg-teal-300': activeSlide !== slide 
          }" 
          x-on:click="activeSlide = slide"
        ></button>
      </template>
    </div>
  </div>
  
  </div>
</div>

#shop #alpinejs

Image gallery

<!-- component -->
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
		<script defer src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js"></script>
	</head>
	<body>
        <div class="flex-shrink-0">
            <div x-data="photoGalleryApp" class="max-w-xl flex flex-col">
                <div class="flex items-center sm:h-80">
                    <div :class="{'cursor-not-allowed opacity-50': ! hasPrevious()}"  class="hidden sm:block cursor-pointer">
                        <svg version="1.0" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" class="h-8" x-on:click="previousPhoto()">
                            <path d="m42.166 55.31-24.332-25.31 24.332-25.31v50.62z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.125"/>
                        </svg>
                    </div>
                    <div class="w-full sm:w-108 flex justify-center">
                        <img x-ref="mainImage" class="w-full sm:w-auto sm:h-80" src="" loading="lazy" />
                    </div>
                    <div :class="{'cursor-not-allowed opacity-50': ! hasNext()}"  class="hidden sm:block cursor-pointer">
                        <svg version="1.0" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" class="h-8" x-on:click="nextPhoto()">
                            <path d="m17.834 55.31 24.332-25.31-24.332-25.31v50.62z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.125"/>
                        </svg>
                    </div>
                </div>
                <div class="flex justify-center mt-1 space-x-1">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/58049699/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 0}" class="h-16 w-16" x-on:click="pickPhoto(0)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/100821385/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 1}" class="h-16 w-16" x-on:click="pickPhoto(1)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/75873313/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 2}" class="h-16 w-16" x-on:click="pickPhoto(2)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/65267550/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 3}" class="h-16 w-16" x-on:click="pickPhoto(3)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/58914463/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 4}" class="h-16 w-16" x-on:click="pickPhoto(4)">
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('photoGalleryApp', () => ({
                currentPhoto: 0,
                photos: [
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/58049699/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/100821385/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/75873313/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/65267550/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/58914463/medium.jpg"
                ],
                init() { this.changePhoto(); },
                nextPhoto() {
                    if ( this.hasNext() ) {
                        this.currentPhoto++;
                        this.changePhoto();
                    }
                },
                previousPhoto() {
                    if ( this.hasPrevious() ) {
                        this.currentPhoto--;
                        this.changePhoto();
                    }
                },
                changePhoto() {
                    this.$refs.mainImage.src = this.photos[this.currentPhoto];
                },
                pickPhoto(index) {
                    this.currentPhoto = index;
                    this.changePhoto();
                },
                hasPrevious() {
                    return this.currentPhoto > 0;
                },
                hasNext() {
                    return this.photos.length > (this.currentPhoto + 1);
                }
                }))
            })
        </script>
    </body>
</html>

#shop #alpinejs

Lightbox modal

<!-- component -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
    <div x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }">
        <template @img-modal.window="imgModal = true; imgModalSrc = $event.detail.imgModalSrc; imgModalDesc = $event.detail.imgModalDesc;" x-if="imgModal">
          <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" x-on:click.away="imgModalSrc = ''" class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75">
            <div @click.away="imgModal = ''" class="flex flex-col max-w-3xl max-h-full overflow-auto">
              <div class="z-50">
                <button @click="imgModal = ''" class="float-right pt-2 pr-2 outline-none focus:outline-none">
                  <svg class="fill-current text-white " xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
                    </path>
                  </svg>
                </button>
              </div>
              <div class="p-2">
                <img :alt="imgModalSrc" class="object-contain h-1/2-screen" :src="imgModalSrc">
                <p x-text="imgModalDesc" class="text-center text-white"></p>
              </div>
            </div>
          </div>
        </template>
      </div>
      
      <div x-data="{}" class="px-2">
        <div class="flex -mx-2">
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: 'Random Image One Description' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
      
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: 'This one has description' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

#js #alpinejs

Alpinejs store accessible from outside

<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
        items: [],
        notify(message) {
            this.items.push(message)
        }
    })
})
</script>

#alpinejs #select #tailwind

Select Field with Search - AlpineJs + Tailwind

https://codepen.io/dixie0704/pen/jOVxGXL

#blade #php #laravel #html #livewire #alpinejs

Date Input Field using Pikaday

<input                       
    type="text" 
    placeholder="Start date" 
    class="px-2 py-1 text-sm rounded text-gray-800" 
    x-init="new Pikaday({ field: $el })"
    x-on:change="$wire.startDate = formatDateToYYYYMMDD(new Date($el.value))"
/>

#shop

ADD TO CART: Інпут введення кількості

<div class="relative min-w-[77px] border">
							<input type="number" id="qty" step="1" min="1" max="{{$p.Available}}" name="qty"
										 value="1" title="К-ть" size="4" pattern="[0-9]*" inputmode="numeric"
										 aria-labelledby="Кількість {{.Body.H1}}"
										 class="appearance-none w-12 h-11 p-0 text-center focus:outline-none" />
							<div class="absolute top-0 right-0 w-8 text-center">
								<a class="block h-6 border-0 text-mist-600 hover:text-mist-600 border-b" href="javascript:void(0);">
									<svg class=" w-5 h-5">
										<use xlink:href="#icon-chevron-up" fill="none" stroke="currentColor"
												 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										</use>
									</svg>
								</a>
								<a class="block h-6 border-0 text-mist-600 hover:text-mist-600" href="javascript:void(0);">
									<svg class=" w-5 h-5">
										<use xlink:href="#icon-chevron-down" fill="none" stroke="currentColor"
												 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										</use>
									</svg>
								</a>
							</div>
						</div>

Carousel with only Tailwind CSS + Alpine.js

Save snippets that work from anywhere online with our extensions

Comments

More like this

AlpineJS

Browse more snippets >>

Carousel with only Tailwind CSS + Alpine.js

Save snippets that work from anywhere online with our extensions

Comments

More like this

AlpineJS

Browse more snippets >>

Embed code snippet