Question

我正在使用插件图片滑块，并尝试显示与图片相关联的特定文字。例如，图像1将显示第1段，图像2将显示第2段，等等。

我打算上传一段代码，展示我在做什么，但插件代码太多了。因此，这里有一个显示我正在做的jsfiddle链接。有问题的主要代码位于javascript的底部，我要显示的文本位于html的底部。这段代码：

$(document).ready(function() {
        $('.ma5slider').ma5slider();
        var court = $('#slide-1');
        var activeSlide = $('.slide--active') == true;
            if(court == activeSlide) {
                court.show();
          console.log('It is working');
                }
    });

我在页面加载时将文本设置为display: none;，然后在显示特定图像时（我相信我将其缩小到类.slide--active），该文本设置为{{1} }。

有谁看到我做错了什么？

Answer 1

这是因为当每张幻灯片转入幻灯片时，您没有定位正确的活动类，我修改了下面的代码：

$(document).ready(function() {
        $('.ma5slider').ma5slider();
        var court = $('.slide');
        var activeSlideClassName = 'slide--active';

        setInterval(function(){ 

          if(court.hasClass(activeSlideClassName)){
            console.log('It is working');
          }

        }, 1000);

});

此外，您的幻灯片需要有一个回调函数，以便在新幻灯片进入时捕获事件。在这种情况下，我使用setInterval()来监控DOM，它不是最好的解决方案但是你得到的想法......

工作代码here

Answer 2

您可以查看$('.ma5slider').on('ma5.activeSlide')，如下所示： jsfiddle

当滑块中的图像处于活动状态时显示div

2 个答案: