Question

资源

我使用 royalSlider 作为插件。这是the documentation & API的快速链接。

在我的网站上，滑块可用作height: 100%; width: 100%全屏滑块。

内容结构

我网站的结构非常简单：我使用幻灯片作为封面，让我们称之为.cover，每个幻灯片后面跟一张包含更多信息的幻灯片。让我们称呼他们为.sub。

Content Cover Nr. 1
  Subslide Content Nr. 1
Content Cover Nr. 2
  Subslide Content Nr. 2
Content Cover Nr. 3
  Subslide Content Nr. 3
Content Cover Nr. 4
  Subslide Content Nr. 4

如果更容易理解，您可以查看live site right here。

在附加我的子幻灯片的函数内部，我在右侧创建三个按钮以向上滚动，向下滚动并关闭当前幻灯片。向下滚动效果很好。（请点击此处查看 main.js 文件，第177行）

问题

浏览器将使用$(p.sl_button)选择的所有按钮绑定到同一子幻灯片，而不是将每个按钮绑定到其自己的父级。

难以解释，易于尝试。如果你，例如：

Open Subslide Number 5
Open Subslide Number 2
滚动至Subslide Number 5
单击关闭按钮（带红色背景的X）

系统“中断”。它不是关闭子级数字5，而是关闭子级数2（这是最后一次，上面命名的函数被调用。

如何解决此问题？

我用来绑定我的子滑梯上的按钮的代码：

// Append Slides by ID and Database
function appendIt(num_id) {
    var $parid = num_id.parents('.rsContent').attr('id');
    var $sub_id = sliderInstance.currSlideId + 1;      
    // get current slide id & increase by 1
    // append html slide
    sliderInstance.appendSlide(eval($parid), $sub_id);
    sliderInstance.next();

    // close button on sub slides
    $('.scrolldown').on('click', function(){
        sliderInstance.next();
    });
    // Scroll Slide Up
    $('.scrollup').on('click', function(){
        sliderInstance.prev();
    });
    // Close Subslide
    $('.close').on('click', function(){
        $('#'+$parid+' p.sl_button').addClass('in');
        sliderInstance.prev();
        setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
    });
};

如果您需要更多信息来重新创建我的bug，请随时询问。我感谢有关此主题的任何帮助或提示。在此先感谢大家深入研究我的问题。

» royalSlider Documentation & API

» Live Version of the website

» My Javascript / jQuery File

Answer 1

在你的代码中，逻辑是这样的：

<强>原始

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl2     | 2           |         |
| sl3     | 3           |         |
| sl4     | 4           |         |
+---------+-------------+---------+

然后尝试附加子幻灯片：

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl2     | 2           |         |
| sl3     | 3           |         |
| sl4     | 4           |         |
| sl4_sub | 5           | 4+1     |
+---------+-------------+---------+

然后尝试在第一张幻灯片上方附加另一张子幻灯片：

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl1_sub | 2           | 1+1     | Notice the currSlideId are always auto sort the id,
| sl2     | 2->3        |         | so the slides below sl1_sub are auto increment by 1.
| sl3     | 3->4        |         |
| sl4     | 4->5        |         |
| sl4_sub | 5->6        | 4+1     |
+---------+-------------+---------+

尝试删除第一张子幻灯片：

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl1_sub | 2           | 1+1     | 
| sl2     | 3           |         | 
| sl3     | 4           |         |
| sl4_sub | 6->5        | 4+1     | It recorded $sub_id with value 4+1, so it removed the
+---------+-------------+---------+ sl4 slide.

所以你需要的是正确地获取当前幻灯片，并将其删除这可以帮助您获得正确的幻灯片ID。每次触发.close：

时，您都应该获得当前的幻灯片ID

$subtarget.find('.close').on('click', function(){
    var $sub_id = sliderInstance.currSlideId; // this line should be added.
    $('#'+$parid+' p.sl_button').addClass('in');
    sliderInstance.prev();
    if ($parid == 'sl0') $skip_0=false;
    else if ($parid == 'sl1') $skip_1=false;
    else if ($parid == 'sl2') $skip_2=false;
    else if ($parid == 'sl3') $skip_3=false;
    else if ($parid == 'sl4') $skip_4=false;
    else if ($parid == 'sl5') $skip_5=false;
    else if ($parid == 'sl6') $skip_6=false;
    else if ($parid == 'sl7') $skip_7=false;
    else if ($parid == 'sl8') $skip_8=false;
    setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
});

Answer 2

我找到了一个适合自己的解决方案：

当我绑定以下功能中的按钮时：

// Append Slides by ID and Database
function appendIt(num_id) {
    var $parid = num_id.parents('.rsContent').attr('id');
    var $sub_id = sliderInstance.currSlideId + 1;      
    // get current slide id & increase by 1
    // append html slide
    sliderInstance.appendSlide(eval($parid), $sub_id);
    sliderInstance.next();

    // close button on sub slides
    $('.scrolldown').on('click', function(){
        sliderInstance.next();
    });
    // Scroll Slide Up
    $('.scrollup').on('click', function(){
        sliderInstance.prev();
    });
    // Close Subslide
    $('.close').on('click', function(){
        $('#'+$parid+' p.sl_button').addClass('in');
        sliderInstance.prev();
        setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
    });
};

每当有人打开子幻灯片时，页面上的所有按钮都会作为同一个子幻灯片的选择器。为了解决这个问题，我使用了以下ID个子滑座：

#sl1
#sl1_sub
#sl2
#sl2_sub

由于每个子网站开始使用相同的ID添加_sub我创建了一个var，它仅使用class选择器与其父ID结合使用的按钮：

// Append Slides by ID and Database
    var $parid = num_id.parents('.rsContent').attr('id');
    var $sub_id = sliderInstance.currSlideId + 1;

    // THIS is the new line
    var $subtarget = $('#' + $parid + '_sub'); // 

    // added the var $subtarget to every button
    $subtarget.find('.scrolldown').on('click', function(){
        sliderInstance.next();
    });
    // added the var $subtarget to every button
    $subtarget.find('.scrollup').on('click', function(){
        sliderInstance.prev();
    });
    // added the var $subtarget to every button
    $subtarget.find('.close').on('click', function(){
        $('#'+$parid+' p.sl_button').addClass('in');
        sliderInstance.prev();
        setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
    });
};

感谢所有花时间思考我的问题并提供答案的人！

Answer 3

使用..

// remove 5th slide:
sliderInstance.removeSlide(4);

参考：http://help.dimsemenov.com/kb/royalslider-javascript-api/dynamically-add-and-remove-slides

royalSlider：如何使用类作为选择器

资源

内容结构

问题

3 个答案: