带有 alpine js 的滑块过渡

Question

我正在使用 alpineJS 和 TailwindCSS 制作滑块，但在转换时遇到问题。请看看下面的代码并指出我做错了什么。

<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 class="flex">
    <div class="bg-black">
      <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" 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">
    </div>
    <div class="bg-black">
      <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" 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">
    </div>
    <div class="bg-black">
      <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" 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">
    </div>
    <div class="bg-black">
      <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" 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">
    </div>
  </div>
</div>

P.S：请不要引用其他滑块库或让我复制别人的代码。我想让这个代码工作

谢谢。

Answer 1

这里有两个问题：

在转换过程中图像的位置不正确
图像之间的黑色背景

解决方案：

位置不正确，因为图像需要重叠，并且它们不能与位置设置为静态（默认）的重叠。所以位置必须是绝对的，这样它们才能重叠，并添加隐藏的溢出，这样框外的任何东西都不会显示。但是您需要指定 parent div 宽度和高度，因为 children 是绝对值。
为了不让黑色背景将高山元素从图像元素移动到它的 parent div 所以整个 div 将被转换而不仅仅是图像

这是包含更改的完整代码段：

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

Answer 2

️ 另一种方式：

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

带有 alpine js 的滑块过渡

Slider transistion with alpinejs

css

css-transitions

tailwind-css

alpine.js