Question

如何在materializecss轮播组件中获取当前幻灯片？我不知道如何从旋转木马内容链接到li标签中的活动类。

For example i need get id element from div, where li class is active

Answer 1

使用onCycleTo回调函数：

 $('.carousel').carousel({
    duration: 100,
    indicators: true,
    onCycleTo: function(data) {
      //do what needs to be done in here ...
   }
});

数据参数返回轮播项目活动链接元素。您可以传递带有数据属性的参数，例如...... 希望这有帮助。

Answer 2

很抱歉在没有登录的情况下回答了这个问题：

使用onCycleTo回调函数：

 $('.carousel').carousel({
    duration: 100,
    indicators: true,
    onCycleTo: function(data) {
      //do what needs to be done in here ...
   }
});

数据参数返回轮播项目活动链接元素。您可以使用数据属性传递参数，例如...希望这会有所帮助。

Answer 3

您可以使用onCycleTo获取当前幻灯片索引。由于之前的答案，添加此答案不会显示该功能内的操作。这是一个让你入门的例子：

$('.carousel').carousel({
    onCycleTo: function (ele) {
      console.log(ele);
      console.log($(ele).index()); // the slide's index
    }
});

Answer 4

在物化文档中

没有＆＃34; li＆＃34;在旋转木马组件中，它只是一个＆＃34; div＆＃34;和一堆＆＃34; a＆＃34;用img标记。

<div class="carousel">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>

`

首先你得到结构，然后你只需要将初始化放在你的javascript文件中

 $(document).ready(function(){
  $('.carousel').carousel();
});

确保脚本以正确的方式加载，否则它将无法正常工作

抱歉我的英语，请告诉我它是否有效。祝你好运。

Answer 5

我已经用旋转木马缩略图做了一个例子，你喜欢做同样的事情我做了什么创建了一个单独的函数，通过检索索引键触发（更改）幻灯片，并激活该滑块缩略图轮播或主要全屏幕

Codepen Example

<!--html-->
 <div class="carousel carousel-slider grey">
    <a class="carousel-item" data-cindex="0" href="#one!"><img src="https://lorempixel.com/800/400/nature/1"></a>
    <a class="carousel-item" data-cindex="1" href="#two!"><img src="https://lorempixel.com/800/400/nature/2"></a>
  ...

//js
$('.carousel.thumbnails').carousel({
    dist: 0,
    padding: 20,
    onCycleTo: function(data){
        changeSlide( $(data).data('cindex'), '.carousel.carousel-slider');
    }
});

changeSlide = function(index, cl) {
   cl = (typeof cl == undefined) ? '.carousel.carousel-slide' : cl;
   $(cl).carousel('set', index);
}

希望这有助于某人

Answer 6

访问：https://jsfiddle.net/Balaram888/uj7sketo/

轮播索引是：

%s

Answer 7

您应该查看http://materializecss.com/carousel.html以获取文档

当前幻灯片实现了css轮播

7 个答案:

轮播索引是：