javascript - 滑块在同一页面上不能工作两次

Question

我试图在页面上使用同一张幻灯片两次但不起作用。只有先工作。当我复制 html 时，图像不会出现在第二个滑块中。

代码

$(function(){
        $('#slides2').slides2({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 0,
            pause: 2500,
            hoverPause: true,
            animationStart: function(current){
                $('.caption').animate({
                    bottom:-35
                },100);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationStart on slide: ', current);
                };
            },
            animationComplete: function(current){
                $('.caption').animate({
                    bottom:0
                },200);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationComplete on slide: ', current);
                };
            },
            slidesLoaded: function() {
                $('.caption').animate({
                    bottom:0
                },200);
            }
        });
    });

Answer 1

slides2您发布的滑块插件的代码中不存在该功能。再用slides一次。当然，在另一个具有不同 ID 的元素上。这就是我试图通过对您的问题的评论来找出答案。

首先，您可以使用：

 $('#slides1').slides({

然后用于第二次使用：

$('#slides2').slides({