2 sliders différents sur même page avec transition différentes pour chaque slide

traderpierre Messages postés 291 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

Bonjour,

J'utilise refineslide pour créer mes sliders sur le site web que je développe.
Refineslide possède ses propres bibliotèques CSS et Javascript.

J'ai incorporé 2 sliders différents 1 dans chaque colonne différente d'un tableau html.
Mais ne je peux pas jouer ces 2 silders présents sur cette même page html avec des transitions différentes pour chaque slider.

Liens sur chaque sliders séparément
https://promosdusines.com/SlidePromos.html
https://promosdusines.com/SlideEngagements.html

Voici le lien de la page équipée des 2 sliders
https://promosdusines.com/BandeauFrDist.html

Le 1er slider "promos" doit effectuer ses transitions sous forme d'un cube 3D en rotation dans le sens horizontale
le paramétrage script transition : cubeH "de ce côté pas de problèmes"

Le 2ème slider "nos engagements" doit effectuer ses transitions sous forme d'un cube 3D en rotation dans le sens vertical
le paramétrage script transition : cubeV

Malheureusement comme vous pouvez le constater sur la page
les deux sliders "promos" et "engagement" effectuent leurs transitions de façon identiques en transition : cubeH alors qu'il y a 2 scripts différents 1 en cube H, et l'autre en cubeV

Comment faire pour y arriver.

Je suppose que je devrais dupliquer les bibliothèques et leur donner un nom différents
et dans les scripts du slider 2 , les adossés à ces duplicatas, mais je n'en suis pas sûr !!!

Merci de votre aide
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,


Tu cibles deux fois les même éléments.. 
<script> $(document).ready(function () {
        $('.rs-slider').refineSlide({
            transition         : 'cubeH',
            transitionDuration : 3000,
            autoPlay           : true,
            keyNav             : false,
            delay              : 2000,
            controls           : null
        });
    });
</script>



<script> $(document).ready(function () {
        $('.rs-slider').refineSlide({
            transition         : 'cubeV',
            transitionDuration : 3000,
            autoPlay           : true,
            keyNav             : false,
            delay              : 2000,
            controls           : null
        });
    });
</script>


Tu ne dois pas non importer plusieurs fois les mêmes scripts 
 <script src="themes/classic/assets/js/jquery.js"></script>
<script src="themes/classic/assets/js/jquery.refineslide.min.js"></script>


<script src="themes/classic/assets/js/jquery2.js"></script>
<script src="themes/classic/assets/js/jquery.refineslide.min2.js"></script>

ça génère des erreurs.....



Tu as juste collé bout à bout les deux codes..... mais ça ne marche pas comme ça !

pour en revenir à ton besoin... il faut que tu cibles tes éléments autrement que par leur class... en leur mettant des ID par exemple....
Si tu ne comprends pas de quoi je parle lorsque je fais référence aux selecteur... commence par apprendre ceci :
http://creersonsiteweb.net/page-jquery-selecteurs

Et également ça :
https://www.alsacreations.com/article/lire/535-quelle-est-la-difference-entre-une-classe-class-et-un-id.html

Reviens nous voir avec ton code modifié si tu rencontres encore des soucis.


.



0

Discussions similaires

Comment faire des en-têtes différent sur des pages word ?
vl02 -
ABDELAALI -

6 réponses
Possible de mettre deux cartes graphiques différentes dans le même pc ?
Arnoxrodriguez -
Hyub -

8 réponses
plusieurs En-Tête différent pour un doc Word
badaouinoor87 -
abdou -

2 réponses