使用 alpinejs 进行滑块转换

Question

使用 alpinejs 进行滑块转换

Jaw*_*dR1 1 css css-transitions tailwind-css alpine.js

我正在使用 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>

Run Code Online (Sandbox Code Playgroud)

PS：请不要引用其他滑块库或要求我复制别人的代码。我想让这段代码工作

谢谢。

Answer 1

Osa*_*ali 9

这里有两个问题：

转换期间图像的位置不正确
图像之间的黑色背景

解决方案：

该位置不正确，因为图像需要重叠，并且它们不能与设置为静态（默认）的位置重叠。因此，位置必须是绝对的，以便它们可以重叠，并添加隐藏的溢出，这样框外的任何内容都不会显示。但是您需要指定父级 div 的宽度和高度，因为子级是绝对的。
为了不让黑色背景将高山的东西从图像元素移动到其父 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>

Run Code Online (Sandbox Code Playgroud)

不客气作为旁注，您可以使用提醒，而不是在此处执行三元运算符 `setInterval(() => { this.active = this.active === 4 ? 1 : this.active+1 }, 3000)`像这样 `setInterval(() => { this.active = (this.active + 1) % 4 }, 3000)` 并从零索引开始 x-show 活动状态，这是旋转范围的更简单、更好的方法数字 (2认同)

归档时间：	4 年，10 月前
查看次数：	9823 次
最近记录：	4 年，6 月前