Resources

I am using royalSlider as a plugin. Here is a quick link to the documentation & API.

On my site the slider works as height: 100%; width: 100% fullscreen slider.

Content Structure

The structure of my site is quite simple: I have slides that I use as cover, lets call them .cover, each followed by a slide containing more information. Lets call them .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

If it is easier to understand, you can check the live site right here.

Inside the function, which appends my sub slides, I create three buttons on the right side to scroll up, scroll down and close the current slide. Scrolling down works just fine. (Check my main.js file right here, line 177)

The Problem

The browser binds all buttons, selected using $(p.sl_button) to the same sub slide, instead of binding each button to its own parent.

Hard to explain, easy to try. If you, for example:

1. Open Subslide Number 5
2. Open Subslide Number 2
3. Scroll to Subslide Number 5
4. Click on the Close Button (X with red background)

the system "breaks". Instead of closing the Subslide Number 5, it closes the subslide number 2 (which was the last time, the function named above got called.

How can I fix this problem?

The code I use to bind the buttons on my subslides:

// 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 ); 
    });
};

If you need further information to recreate my bug feel free to ask. I appreciate any help or hinds regarding this topic. Thanks in advance to everyone digging into my problem.

» royalSlider Documentation & API

» Live Version of the website

» My Javascript / jQuery File

Resources

I am using royalSlider as a plugin. Here is a quick link to the documentation & API.

On my site the slider works as height: 100%; width: 100% fullscreen slider.

Content Structure

The structure of my site is quite simple: I have slides that I use as cover, lets call them .cover, each followed by a slide containing more information. Lets call them .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

If it is easier to understand, you can check the live site right here.

Inside the function, which appends my sub slides, I create three buttons on the right side to scroll up, scroll down and close the current slide. Scrolling down works just fine. (Check my main.js file right here, line 177)

The Problem

The browser binds all buttons, selected using $(p.sl_button) to the same sub slide, instead of binding each button to its own parent.

Hard to explain, easy to try. If you, for example:

1. Open Subslide Number 5
2. Open Subslide Number 2
3. Scroll to Subslide Number 5
4. Click on the Close Button (X with red background)

the system "breaks". Instead of closing the Subslide Number 5, it closes the subslide number 2 (which was the last time, the function named above got called.

How can I fix this problem?

The code I use to bind the buttons on my subslides:

// 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 ); 
    });
};

If you need further information to recreate my bug feel free to ask. I appreciate any help or hinds regarding this topic. Thanks in advance to everyone digging into my problem.

» royalSlider Documentation & API

» Live Version of the website

» My Javascript / jQuery File

• javascript
• jquery
• html
• css
• royal-slider

• I think you should do a better effort to explain "open subslide 5 and than open subslide 2" from where what subslide what huh hah? I mean for subslide you mean one should click on the main page the "Unternehmensprofil" button? than what? "Scroll to" scroll how? I cannot use the scrollwheel at all bro. You know what I mean... – Roko C. Buljan Commented Jul 4, 2015 at 22:16
• 1 Also, splease, once you remove your Live Example link your question will be useless (totally) so the answers also - for future visitors. Please try always to put the needed right inside your question. See: stackoverflow./help/mcve – Roko C. Buljan Commented Jul 4, 2015 at 22:20
• Hey @RokoC.Buljan, thanks for your feedback. You can scroll using your keyboard or click and hold, or using the navigation on the right side. I will provide a jsfiddle demo today! – Marian Rick Commented Jul 5, 2015 at 8:01
• @MarianRick Multiple click events appear attached to p.sl_button element ? Can create stacksnippets , jsfiddle to demonstrate ? – guest271314 Commented Jul 5, 2015 at 17:36

3 Answers 3

In your code, the logic is like that:

original:

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

then trying to append a sub slide:

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

then trying to append another sub slide above the first slide:

+---------+-------------+---------+
| 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     |
+---------+-------------+---------+

Trying to remove the first sub slide:

+---------+-------------+---------+
| 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.

So what you need is to get the current slide correctly, and remove it.
This may help you to get the right slide id. You should get the current slide id, each time when you trigger .close:

$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 ); 
});

I have found a solution on my own that works for me:

As I bind the buttons in the following function:

// 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 ); 
    });
};

Every time someone opens a sub slide all buttons on the page work as selector for the same subslide. To fix this I have used the following IDs of my subslides:

#sl1
#sl1_sub
#sl2
#sl2_sub

As every subslide starts using the same ID adding a _sub I have created a var, that targets only the buttons using the class selector bined with its parent 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 ); 
    });
};

Thanks for everyone that took his time to think about my question and providing an answer!

Use..

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

Reference:http://help.dimsemenov./kb/royalslider-javascript-api/dynamically-add-and-remove-slides