RoyalSlider: Comment supprimer une diapositive en utilisant une classe en tant que sélecteur

Dans votre code, la logique est comme ça:

original:

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

Puis essayer d'ajouter une diapositive secondaire:

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

Puis essayer d'ajouter une autre diapositive sous la première diapositive:

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

Essayer d'enlever la première diapositive secondaire:

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

Donc, ce dont vous avez besoin, c'est d'obtenir correctement la diapositive actuelle et de la supprimer.
Cela peut vous aider à obtenir l'identifiant de la bonne glissière. Vous devriez obtenir l'ID de la diapositive actuelle, chaque fois que vous déclenchez .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 ); }); 

J'ai trouvé une solution seule qui fonctionne pour moi:

Comme je lier les boutons dans la fonction suivante:

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

Chaque fois que quelqu'un ouvre une sous-diapositive, tous les boutons de la page fonctionnent comme sélecteur pour le même sous-glissement. Pour corriger cela, j'ai utilisé les ID suivants de mes sous-titres:

 #sl1 #sl1_sub #sl2 #sl2_sub 

Comme chaque sous-démarrage commence à utiliser la même ID ajoutant un _sub j'ai créé un var, qui cible uniquement les boutons utilisant le sélecteur de class combiné avec son ID parent:

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

Merci à tous ceux qui ont pris le temps de réfléchir à ma question et de répondre!

Utilisation..

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

Référence: http://help.dimsemenov.com/kb/royalslider-javascript-api/dynamically-add-and-remove-llides