使用 alpine js 进行幻灯片转换答案

【问题标题】：Slider transistion with alpinejs使用 alpine js 进行幻灯片转换
【发布时间】：2021-04-11 06:19:50
【问题描述】：

我正在使用 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：请不要参考其他滑块库或要求我复制别人的代码。我想让这段代码工作

谢谢。

【问题讨论】：

你喜欢jquery幻灯片吗
@QuestionsBoy 大多数幻灯片都很好，可以做我想要的，但我不想使用一些库或复制别人的代码。这仅用于学习目的。
@Jerry555555 活动值将每秒更改一次，并对应于具有该活动值的 x-show，这不会让您的 div 突然出现

标签： css css-transitions tailwind-css alpine.js

【解决方案1】：

这里有两个问题：

在过渡期间，图像的位置不正确
图像之间的黑色背景

解决方案：

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

这是完整的 sn-p 更改：

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

【讨论】：

我想到了 apline js 的东西移动到父级但有定位问题。它就像一个魅力。谢谢。
不客气作为旁注，而不是在这里做三元运算符setInterval(() => { this.active = this.active === 4 ? 1 : this.active+1 }, 3000) 你可以使用像这样的提醒setInterval(() => { this.active = (this.active + 1) % 4 }, 3000) 并从零索引开始 x-show 活动状态，这更容易更好旋转数字范围的方法
感谢您的建议，但我认为我当前的实现对我来说更具可读性。如果你能告诉我你的方法更好，我可能会考虑改变。
如果代码不起作用，可读代码有什么意义？

【解决方案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>

【讨论】：

您好，请尝试为您的解决方案添加更多描述或解释（例如，它与其他解决方案的不同之处）