royalSlider: How to remove a slide using a class as selector

Question

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:

Open Subslide Number 5
Open Subslide Number 2
Scroll to Subslide Number 5
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

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, Jul 04 '15 at 22:16
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: http://stackoverflow.com/help/mcve — Roko C. Buljan, Jul 04 '15 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, Jul 05 '15 at 08:01
@MarianRick Multiple `click` events appear attached to `p.sl_button` element ? Can create stacksnippets , jsfiddle to demonstrate ? — guest271314, Jul 05 '15 at 17:36

score 4 · Answer 1 · answered Jul 06 '15 at 07:12

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

Thanks for this comment! I have found a solution yesterday night (that you are already using in your code using $subtarget, but I was too tired to add my solution to stack overflow. I have done this right now. Thanks a lot for taking your time to think about my problem. I appreciate this a lot! — Marian Rick, Jul 06 '15 at 08:22
I have already added your line inside of my code, I only cache it while I am on the cover slide and use `+1` to target the subside: `var $sub_id = sliderInstance.currSlideId + 1;` (line 148). — Marian Rick, Jul 06 '15 at 08:24
You're welcome. I'm glad to see that `if else block` have been removed and you solved problem by yourself. — North, Jul 06 '15 at 08:42
BTW, if you appreciate my effort, don't you give me bounty or upvote? I spent lot of time to edit your code and the table. — North, Jul 06 '15 at 08:57
I really appreciate your effort, but I cannot give you the bounty, as your solution does not solve the problem! Of course I show some love and up vote, as it seems like you will be happy about the reputation :) there you go, you should notice my appreciation ;) — Marian Rick, Jul 06 '15 at 09:09
Ah... I don't think you should give me upvote in my other answers without reviewing the quality. But thanks. — North, Jul 06 '15 at 09:17

score 4 · Accepted Answer · answered Jul 06 '15 at 08:18

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 combined 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!

score 1 · Answer 3 · answered Jul 06 '15 at 07:16

1

Use..

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

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

answered Jul 06 '15 at 07:16

Jaffer Wilson

7,029
10
62
139

Thanks a lot @Jaffer Wilson, but I already use this line of code. Sadly its not that simple, because everytime someone interacts with my website the slideIds change! – Marian Rick Jul 06 '15 at 08:27
It's ok dear... my work is to provide you solution.....I think I have done it ....ok – Jaffer Wilson Jul 06 '15 at 08:29

royalSlider: How to remove a slide using a class as selector

Resources

Content Structure

The Problem

3 Answers3

Linked