如何关闭Tailwind Elements中Carousel轮播的自动滑动功能

你遇到的data-interval="false"仅初始生效、手动点击控制按钮切换后自动滑动恢复的问题，核心原因是Tailwind Elements的组件配置统一使用带te前缀的自定义data属性，不带前缀的Bootstrap风格属性只会被部分识别，无法完整覆盖自动轮播逻辑。

静态初始化（纯HTML配置） #

直接在轮播的根容器元素上添加两个配置属性即可完全关闭自动滑动，原有轮播内容、控制按钮、指示器的代码不需要改动：

<div
  id="yourCarouselId"
  class="relative"
  data-te-carousel-init
  data-te-carousel-interval="false"
  data-te-carousel-ride="false">
  <!-- 轮播slides、前后切换按钮、指示器原有代码 -->
</div>

• data-te-carousel-interval="false"：直接禁用自动切换的间隔计时
• data-te-carousel-ride="false"：禁止用户手动操作后组件自动重启轮播逻辑

动态初始化（JS实例化场景） #

如果是通过JS手动创建轮播实例，直接在初始化配置项里传入对应参数即可：

import { Carousel } from 'tw-elements';

const carouselElement = document.getElementById('yourCarouselId');
const carouselInstance = new Carousel(carouselElement, {
  interval: false,
  ride: false
});

如果是已经完成初始化的轮播实例，可以直接调用方法+修改配置彻底关闭自动滑动：

// 立即停止当前正在运行的自动轮播
carouselInstance.pause();
// 修改实例配置，禁止后续操作触发自动轮播
carouselInstance._config.interval = false;

验证方式：配置完成后刷新页面，手动点击前后切换按钮、点击指示器切换幻灯片，都不会再触发自动轮播。

内容的提问来源于stack exchange，提问作者GeekPeek