MDB旋转木马幻灯片更换事件

是指在使用MDB（Material Design for Bootstrap）框架中的旋转木马（Carousel）组件时，当幻灯片切换到下一张或上一张时触发的事件。

旋转木马幻灯片是一种常见的网页元素，用于展示多张图片或内容，通过自动或手动切换幻灯片来呈现不同的信息。MDB是一个基于Bootstrap的前端框架，提供了丰富的UI组件和样式，方便开发人员快速构建现代化的网页界面。

在MDB中，旋转木马幻灯片组件提供了一些事件，可以在幻灯片切换时执行自定义的操作。其中，更换事件（Slide Change Event）是指当幻灯片切换到下一张或上一张时触发的事件。

通过监听旋转木马幻灯片的更换事件，开发人员可以实现一些交互效果或逻辑，例如根据当前幻灯片的索引值改变其他页面元素的状态、加载特定的内容等。

以下是一个示例代码，展示如何使用MDB框架中的旋转木马幻灯片更换事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css">
  <title>MDB Carousel Slide Change Event</title>
</head>
<body>
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="image1.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="image2.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="image3.jpg" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>

  <script>
    // 监听旋转木马幻灯片更换事件
    $('#carouselExampleControls').on('slide.bs.carousel', function (e) {
      var currentIndex = $(e.relatedTarget).index();
      console.log('Slide changed to index ' + currentIndex);
      // 在这里执行自定义操作
    });
  </script>
</body>
</html>

在上述示例代码中，我们使用了MDB框架提供的旋转木马幻灯片组件，并通过jQuery监听了slide.bs.carousel事件。在事件处理函数中，我们可以获取当前幻灯片的索引值，并执行自定义的操作。

需要注意的是，以上示例代码中的链接地址是为了演示方便而提供的CDN链接，实际开发中建议下载相应的库文件并部署到自己的服务器上。

对于MDB旋转木马幻灯片更换事件的应用场景，可以根据具体需求进行定制。例如，在电子商务网站中，可以利用该事件在幻灯片切换时更新商品信息或展示不同的促销活动；在新闻网站中，可以根据幻灯片的更换事件加载不同的新闻内容。

腾讯云提供了一系列云计算相关的产品，其中包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据具体需求和场景进行选择。

MDB旋转木马幻灯片更换事件

、、、、

我正在使用angular-bootstrap-md carousel，但我不知道如何捕获幻灯片更改事件。<mdb-carousel [animation]="'slide'" (slide)="onSlide($event)" > </mdb-carousel&

浏览 14提问于2019-05-10得票数 0

回答已采纳

1回答

嵌套猫头鹰旋转木马2不能工作

、、

我有两个owl旋转木马嵌套 pullDrag: false */但当我拖动旋转木马内部(产品-图像滑块)，那么母旋转木马也拖动。我试图禁用或阻止父母的旋转木马，但不能工作。

浏览 1提问于2018-08-14得票数 0

回答已采纳

1回答

jQuery滑雪板:如何滚动少于一整张幻灯片

、、

使用，我试图创建一个旋转木马，在第一张幻灯片上，它将显示75%的幻灯片，而滚动时只显示下一张幻灯片的75%。第一张幻灯片只显示75%，然后显示下一张幻灯片的25% 正在发生的事情:显示下一张幻灯片的75%，但没有显示前一张幻灯片的25% 我要完成的任务:显示前一张幻灯片的25%和当前幻灯片的75%似乎没有比1和更好的滑雪板拒绝更换幻灯片了。我还发现

浏览 0提问于2019-08-26得票数 3

回答已采纳

1回答

如果使用bootrap的Carousel内部的carousel，则carousel不能正常工作

我成功地开始工作，如果基本引导旋转木马： <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

浏览 0提问于2014-01-13得票数 1

1回答

如何修改引导旋转木马javascript文件，使其能够触发此函数？

、、、

我的解决方案是在旋转木马转到下一张幻灯片后立即调用这个函数。我做，而不是想要一个css解决方案。

浏览 3提问于2013-03-12得票数 0

回答已采纳

1回答

Owl旋转木马水平缩略图-添加导航

我有下面的owl carousel和thumbnail bar。 $('.sv-slider .owl-carousel').owlCarousel({ autoplayHoverPause: true, nav: true, thumbImage: true, thumbContainerClass: 'owl-thumbs', thumbItem

浏览 1提问于2018-10-30得票数 6

1回答

旋转木马自动播放视频

、、、

我有一个旋转木马与图像和视频，我决定自动播放视频。问题是，当我加载包含旋转木马的页面时，它会自动复制视频。当我在相应的幻灯片上定位时，我需要自动播放视频。问题是我不知道怎么做。

浏览 1提问于2017-04-27得票数 1

回答已采纳

2回答

Twitter引导程序:显示模式上的幻灯片旋转木马

、

我有一个模式，包含一个旋转木马与2幻灯片与登录和注册表格。每当发生幻灯片转换时，模态标题文本就会更改(绑定到旋转木马的“滑动”<em

浏览 4提问于2012-06-30得票数 1

回答已采纳

5回答

引导3.1旋转木马上每个项目的不同幻灯片持续时间

、

我试图对每一张幻灯片有不同的持续时间，因为我的一些幻灯片内容大，有些小，请用小提琴给我一个解决方案。我尝试过这样做，但它只适用于幻灯片动画时间： position: relative; -webkit-transition

浏览 3提问于2014-04-25得票数 10

回答已采纳

2回答

引导旋转木马幻灯片事件不起作用

、

我正试图在旋转木马上添加幻灯片事件，但它并没有被点燃。background-image:url('images/home_bg2.jpg')"></div> </div>我的javascript，但它不工作，也没有在图像幻灯片上显示任何警报

浏览 1提问于2017-08-02得票数 0

4回答

是否有一种方法来阻止从子到父之间的滑动事件传播？

、、、、

我有幻灯片，用户可以在不同的幻灯片之间滑动和导航，但有些幻灯片在slides.so中有旋转木马或嵌套幻灯片，如果我滑动旋转木马，幻灯片导航就会发生，我需要防止这种情况发生。谢谢使用GSAP可拖动，尝试在stopPropagation事件中赋予onPress

浏览 3提问于2020-01-20得票数 2

回答已采纳

10回答

从插槽中的内容向父级发出事件

、、

我正在尝试构建一个灵活的旋转木马控件，允许内部内容元素强制更改幻灯片，以及旋转木马控制自己更改幻灯片<my-carousel> <button @click="$emit('close')">Close</button>

浏览 5提问于2018-06-20得票数 41

回答已采纳

1回答

无法在幻灯片或幻灯片事件中暂停引导旋转木马

使用最新的引导5旋转木马，我无法暂停在一个滑动或幻灯片事件内的旋转木马。new bootstrap.Carousel(myCarouselEl, { })我尝试了各种不同的解决方案，并能够暂停旋转木马从document.ready的身体，但不是在滑动或幻灯片事件。我想知道这是否是一个范围问题，而且slid处理程序具有不同的作用域，但是当

浏览 1提问于2022-01-23得票数 0

3回答

如何通过jquery更改父类的背景色

、、

嗨，我正在用.carousel-indicators定位的relative制作一个引导旋转木马。但是，由于这一点，我不能将每个旋转木马项目的background-color设置为不同因此，我尝试将background-color属性应用于父类。

浏览 7提问于2016-08-26得票数 0

回答已采纳

2回答

当活动状态被移除时，旋转木马不可见？

、、

我正在制作旋转木马并将其插入col-md-8中，剩下的4个网格用于侧导航。当我为幻灯片从包装类中删除活动类时，我的旋转木马是不可见的，为什么会发生这种情况，为什么我们需要使它活动。carousel-control" href="#myCarousel" data-slide="next"></div> 如果我将class="item active"改为class=&quo

浏览 1提问于2017-06-13得票数 0

回答已采纳

1回答

如何使用twitter引导程序在旋转木马中动画文本？

、、

最近，我在上看到了这个特性--当旋转木马离开的时候，一个文本块会从顶部进入动画/苍蝇。使旋转木马工作良好，但没有多少成功的文本动画。我怎样才能得到这个文本飞入功能？当旋转木马幻灯片事件被触发时，我希望触发文本动画。

浏览 1提问于2012-08-23得票数 0

回答已采纳

1回答

角度旋转木马，单击旋转木马内的事件未按预期工作

、、、

我已经创建了一个转盘的卡片，并使用mdb的角度。旋转木马的代码在结构上类似于： <mdb-carousel [animation]="'fade'"></mdb-carousel> 我在click事件上调用一个函数，并且在那里传递id。constructor() { } test =

浏览 15提问于2020-12-25得票数 0

1回答

编辑幻灯片标题的字体和字体颜色

、

我在一页上有一个旋转木马，上面有一些幻灯片。作者可以在体验编辑器中编辑幻灯片的内容。也就是说，他可以改变文本和背景图像。但是，他不能通过编辑器更改字体颜色。如何允许作者更改幻灯片标题字段的体验编辑器中的字体颜色？也许允许他从带有不同css类的标题字段的变体中进行选择？但是，我不知道如何为标题字段创建一个变体。

浏览 3提问于2017-10-18得票数 0

回答已采纳

1回答

使用Ajax和jQuery按一下按钮动态追加时，Owl旋转木马项无法工作。

、、、、

我试图使用jQuery和ajax调用来绑定owl旋转木马中的图像，使用单击事件按钮，我们需要使用owl旋转木马幻灯片显示所有图像，但是单击owl旋转木马内容之后，旋转木马将无法工作。在绑定之后，我也尝试过重新加载旋转木马，但是没有工作。

浏览 9提问于2022-04-05得票数 0

1回答

Jquery - Javascript :创建一个旋转木马

、、、

通常，我可以用CarouFredsel插件()做我想做的任何事情，但是我没有找到一种方法来完成这个工作:我尝试创建一个旋转木马的jquery ，以便很好地从一个旋转木马切换到另一个旋转木马。有了CarouFredsel，我可以在另一个旁边有几个旋转木马，然后用jquery动画切换到下一个旋转木马，但这并不顺利，因为carouFredsel可能是由于不同的div高度造成的。

浏览 6提问于2013-11-12得票数 0

点击加载更多