Slider transistion with alpinejs

Reputation: 56

🖐️ another way :

<div class=" relative " x-data="{ activeSlide: 0, slides: {{ \App\Models\Banner::all()->pluck('image')->take(5) }} }">
<template x-for="(slide,index) in slides" :key="index">
        <div x-show="activeSlide === index && setTimeout(() => {
            activeSlide = activeSlide == slides.length-1 ? 0 : activeSlide + 1}, 5000)"
            class="  px-1 text-white rounded">
            <img class="h-96 w-full rounded shadow z-0" x-bind:src="`storage/banners/${slide}`">
        </div>
 </template>
</div>

Upvotes: 2

Osama Jandali

Reputation: 154

There are two problems here:

During the transition the images' position is not correct
Black background between images

Solution:

The position is not correct because images need to overlap and they can't overlap with their position set to static (default). So the position need to be absolute so they could overlap and also add overflow hidden so nothing outside the box will be shown. But you need to specify the parent div width and height because of the children being absolute.
In order not to have the black background move alpine stuff from the image element to its parent div so the whole div will be transitioned not only the image

Here is the complete snippet with the changes:

<link
          href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css"
          rel="stylesheet"
        />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js"></script>

        <div
          class="relative"
          x-data="{
                        active: 1,
                        loop() {
                            setInterval(() => { this.active = this.active === 4 ? 1 : this.active+1 }, 3000)
                        },
                    }"
          x-init="loop"
        >
          <div
            style="width: 1350px; height: 901px"
            class="flex overflow-x-hidden relative"
          >
            <div
              class="bg-black absolute"
              x-show="active == 1"
              x-transition:enter="transition duration-1000"
              x-transition:enter-start="transform translate-x-full"
              x-transition:enter-end="transform translate-x-0"
              x-transition:leave="transition duration-1000"
              x-transition:leave-start="transform"
              x-transition:leave-end="transform -translate-x-full"
            >
              <img
                class="w-full h-96 object-cover opacity-30"
                alt="1"
                src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
              />
            </div>
            <div
              class="bg-black absolute"
              x-show="active == 2"
              x-transition:enter="transition duration-1000"
              x-transition:enter-start="transform translate-x-full"
              x-transition:enter-end="transform translate-x-0"
              x-transition:leave="transition duration-1000"
              x-transition:leave-start="transform"
              x-transition:leave-end="transform -translate-x-full"
            >
              <img
                class="w-full h-96 object-cover opacity-30"
                alt="2"
                src="https://images.unsplash.com/photo-1497366216548-37526070297c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
              />
            </div>
            <div
              class="bg-black absolute"
              x-show="active == 3"
              x-transition:enter="transition duration-1000"
              x-transition:enter-start="transform translate-x-full"
              x-transition:enter-end="transform translate-x-0"
              x-transition:leave="transition duration-1000"
              x-transition:leave-start="transform"
              x-transition:leave-end="transform -translate-x-full"
            >
              <img
                class="w-full h-96 object-cover opacity-30"
                alt="3"
                src="https://images.unsplash.com/photo-1564069114553-7215e1ff1890?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80"
              />
            </div>
            <div
              class="bg-black absolute"
              x-show="active == 4"
              x-transition:enter="transition duration-1000"
              x-transition:enter-start="transform translate-x-full"
              x-transition:enter-end="transform translate-x-0"
              x-transition:leave="transition duration-1000"
              x-transition:leave-start="transform"
              x-transition:leave-end="transform -translate-x-full"
            >
              <img
                class="w-full h-96 object-cover opacity-30"
                alt="4"
                src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80"
              />
            </div>
          </div>
        </div>

Upvotes: 9

Slider transistion with alpinejs

Answers (2)

Related Questions