如果您对tailwindCSS-如何在轮播幻灯片上添加按钮？和幻灯片轮播怎么设置感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解tailwindCSS-如何在轮播幻灯片上添加按钮？的各种细节，并
如果您对tailwindCSS - 如何在轮播幻灯片上添加按钮？和幻灯片轮播怎么设置感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解tailwindCSS - 如何在轮播幻灯片上添加按钮？的各种细节，并对幻灯片轮播怎么设置进行深入的分析，此外还有关于2023 告别 CSS 预处理工具，彻底拥抱 TailwindCSS、@tailwindcss/jit 在 postcss.config.js 中配置时不起作用 这是我的依赖项，我已经安装了@tailwindcss/jit、android – 如何在图像按钮上添加按钮标题、css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）的实用技巧。
本文目录一览：- tailwindCSS - 如何在轮播幻灯片上添加按钮？（幻灯片轮播怎么设置）
- 2023 告别 CSS 预处理工具，彻底拥抱 TailwindCSS
- @tailwindcss/jit 在 postcss.config.js 中配置时不起作用 这是我的依赖项，我已经安装了@tailwindcss/jit
- android – 如何在图像按钮上添加按钮标题
- css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）
tailwindCSS - 如何在轮播幻灯片上添加按钮？（幻灯片轮播怎么设置）
如何解决tailwindCSS - 如何在轮播幻灯片上添加按钮？？
我一直在玩这个轮播created by Tom Smedley。他使用 AlpineJS 和 TailwindCSS。这真是一个华丽的设计。
我重新编辑了上面链接的代码笔以适合我的问题。
Here is my version of the sandbox which replicates the problem
我为每个轮播幻灯片添加了一个 LEARN MORE 按钮，但是该按钮隐藏在 <h1> 内容标题后面。为了测试，我在按钮上添加了悬停效果来改变颜色，但是按钮无法悬停。
- 如何将按钮固定在
<h1>文本的前面并使其位于<h1>标题的左下角？我可以通过设置按钮边距来解决这个问题，但由于每张幻灯片上文本长度的性质，这不是一个好的解决方案。
以下是我想要达到的目标的屏幕截图：
我不在乎按钮是否在幻灯片之外（由于 h1 文本长度），我只希望它位于标题文本的左下方。
我尝试了很多使用 flex、网格等的尝试......但我一直在挣扎。谢谢你的帮助。
解决方法
将所有 <button> 标签放在 <h1> 标签中，并插入以下 CSS：
h1 > button {
position: absolute !important;
left: 0;
top: 100%;
font-size: 1rem !important;
}
我还包含了一个片段。以全屏模式运行：
function carousel() {
return {
active: 0,init() {
var flkty = new Flickity(this.$refs.carousel,{
wrapAround: true,});
flkty.on("change",(i) => (this.active = i));
},};
}
function carouselFilter() {
return {
active: 0,changeActive(i) {
this.active = i;
this.$nextTick(() => {
let flkty = Flickity.data(
this.$el.querySelectorAll(".carousel")[i]
);
flkty.resize();
console.log(flkty);
});
},};
}.flickity-viewport {
height: 500px !important;
}
h1 > button {
position: absolute !important;
left: 0;
top: 100%;
font-size: 1rem !important;
pointer-events: auto; /* This is part of EDIT 2 */
}
<html>
<head></head>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
<body>
<mainx-data="carouselFilter()"
>
<div>
<div>
<a:href="#"
@click.prevent="changeActive(0)"
>Lorem Ipsum</a
>
</div>
<divx-show="active == 0"
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"
>
<divx-data="carousel()"
x-init="init()"
>
<div>
<h1x-show="active == 0"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12"
>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry''s standard dummy
text ever since the 1500s
<buttonx-show="active == 0"
>
LEARN MORE
</button>
</h1>
<h1x-show="active == 1"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12"
>
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
<buttonx-show="active == 1"
>
LEARN MORE
</button>
</h1>
<h1x-show="active == 2"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12"
>
There are many variations of passages of Lorem Ipsum available
<buttonx-show="active == 2"
>
LEARN MORE
</button>
</h1>
<h1x-show="active == 3"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12"
>
but the majority have suffered alteration in some form
<buttonx-show="active == 3"
>
LEARN MORE
</button>
</h1>
</div>
<divx-ref="carousel">
<div>
<img
src="https://images.unsplash.com/photo-1581375221876-8f287f7cd2cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=770&q=80"
loading="lazy"
/>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1581375279144-bb3b381c7046?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
loading="lazy"
/>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1581375303816-4a17124934f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
loading="lazy"
/>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
loading="lazy"
/>
</div>
</div>
</div>
</div>
<divx-show="active == 1"
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"
></div>
</div>
</main>
</body>
</html>您无法对按钮应用悬停效果的原因是某个 pointer-events 属性已设置为 none，在包含 {{1} } 和 <h1> 标签。这是因为如果不这样设置，应用于背景的拖动功能将不起作用。因此，您可以选择单击按钮并突出显示标题文本，或者可以拖动和滚动背景。
如果您删除 pointer-events-none 类，您会注意到您的悬停效果在按钮上起作用。
编辑：
好的，所以我们进入了第 2 部分。基本上我们需要做的是将按钮提升到标题所在的级别。当这个页面在 DOM 中呈现时，您可以使用 DevTools 检查元素。我从 DOM 中复制了按钮元素，并将它们与所有 <button> 标记放在同一个容器中。所以现在你有 2 组按钮。这是一组的样子：
<h1>稍微翻阅 Flickity 文档，您会发现按钮是 optional，用于渲染。同样，由于我们不会直接与 Flickity 实例交互，因此我在初始化时禁用了拖动功能。这看起来像这样：
<buttontype="button" aria-label="Previous" onclick="slide(''previous'')">
<svgviewBox="0 0 100 100">
<path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path>
</svg>
</button>
<buttontype="button" aria-label="Next" onclick="slide(''next'')">
<svgviewBox="0 0 100 100">
<path d="M 10,0 Z"transform="translate(100,100) rotate(180) "></path>
</svg>
</button>
由于我们添加的新按钮基本上是 Flickity 使用的按钮，所以我们真的不需要太担心样式。只需要稍微修改一下。为了减少意外修改实际 CSS 的机会，我添加了一个类 function carousel() {
return {
active: 0,init() {
var flkty = new Flickity(this.$refs.carousel,{
wrapAround: true,draggable: false,// This is new
prevNextButtons: false // This is new
});
flkty.on("change",(i) => (this.active = i));
}
};
}
。
附加样式：
custom-flickity-button最后，我们需要为新按钮提供一些点击功能：
.custom-flickity-button {
/* 21 is the threshold. Below this,it will be under the h1 text */
z-index: 25;
}
.custom-flickity-button:focus {
outline: none;
box-shadow: none;
}
/*
If you make h1 relative,then this padding will apply.
But that was causing some issues while transitioning.
I''m leaving this for you to explore.
*/
#text-container {
padding: 0 70px;
}
我不太熟悉使用 Alpine 和 Tailwind，因此您可能会修改此代码以适应它。但无论如何，这就是你所要求的。带有交互式滑块按钮的交互式了解详情按钮。
// This is to make the new buttons slide. You can modify the logic to work with multiple carousels,as you''ve done above
function slide(value) {
let flkty = Flickity.data(document.querySelector(''.carousel''))
if (value == ''next'') {
flkty.next()
} else if (value == ''previous'') {
flkty.previous()
}
}
function carousel() {
return {
active: 0,};
}
// This is to make the new buttons slide. You can modify the logic to work with multiple carousels,as you''ve done above
function slide(value) {
let flkty = Flickity.data(document.querySelector(''.carousel''))
if (value == ''next'') {
flkty.next()
} else if (value == ''previous'') {
flkty.previous()
}
}.flickity-viewport {
height: 500px !important;
}
h1 > button {
position: absolute !important;
left: 0;
top: 100%;
font-size: 1rem !important;
}
.custom-flickity-button {
/* 21 is the threshold. Below this,it will be under the h1 text */
z-index: 1
}
.custom-flickity-button:focus {
outline: none;
box-shadow: none;
border: none;
}
/*
If you make h1 relative,then this padding will apply.
But that was causing some issues while transitioning.
I''m leaving this for you to explore.
*/
#text-container {
padding: 0 70px;
}PS：出于某种原因，<html>
<head></head>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
<body>
<mainx-data="carouselFilter()">
<div>
<div>
<a:href="#" @click.prevent="changeActive(0)">Lorem Ipsum</a>
</div>
<divx-show="active == 0" 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">
<divx-data="carousel()" x-init="init()">
<divid="text-container">
<buttontype="button"
aria-label="Previous" onclick="slide(''previous'')"><svgviewBox="0 0 100 100">
<path d="M 10,0 Z"></path>
</svg></button>
<buttontype="button"
aria-label="Next" onclick="slide(''next'')"><svgviewBox="0 0 100 100">
<path d="M 10,0 Z"transform="translate(100,100) rotate(180) "></path>
</svg></button>
<h1x-show="active == 0"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry''s standard dummy
text ever since the 1500s
<buttonx-show="active == 0">
LEARN MORE
</button>
</h1>
<h1x-show="active == 1"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12">
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
<buttonx-show="active == 1">
LEARN MORE
</button>
</h1>
<h1x-show="active == 2"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12">
There are many variations of passages of Lorem Ipsum available
<buttonx-show="active == 2">
LEARN MORE
</button>
</h1>
<h1x-show="active == 3"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-12"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-12">
but the majority have suffered alteration in some form
<buttonx-show="active == 3">
LEARN MORE
</button>
</h1>
</div>
<divx-ref="carousel">
<div>
<img
src="https://images.unsplash.com/photo-1581375221876-8f287f7cd2cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=770&q=80"
loading="lazy" />
</div>
<div>
<img
src="https://images.unsplash.com/photo-1581375279144-bb3b381c7046?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
loading="lazy" />
</div>
<div>
<img
src="https://images.unsplash.com/photo-1581375303816-4a17124934f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
loading="lazy" />
</div>
<div>
<img
src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
loading="lazy" />
</div>
</div>
</div>
</div>
</div>
<divx-show="active == 1"
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"
></div>
</main>
</body>
</html> 仍在代码段中显示蓝色框阴影。它没有正常显示，所以你可能想看看它。
编辑 2：
嘿！刚刚对指针事件属性做了一些阅读，结果证明如果你将 .custom-flickity-button:focus 设置为一个元素，但给它的任何子元素赋值 pointer-events: none，父元素将不会阻止触发孩子的指针事件。
基本上这意味着我在编辑 1 中所做的一切都是不必要的。您需要做的就是在我的原始答案中的按钮中添加一行额外的 CSS -> pointer-events: auto，您将拥有可用的按钮和可拖动的轮播！
这个不错！它解决了你的问题，你和我今天都学到了一些新东西！ :P
我已在我的原始代码段中进行了此更改，因此您可以在此处查看。至于编辑 1，我暂时保持原样。可能会在其他时间帮助别人，谁知道呢。
