Menu

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

Messages postés
101
Date d'inscription
mercredi 11 octobre 2006
Statut
Membre
Dernière intervention
9 mai 2019
- - Dernière réponse : jordane45
Messages postés
25575
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 mai 2019
- 9 mai 2019 à 16:59
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
Afficher la suite 

Votre réponse

1 réponse

Messages postés
25575
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 mai 2019
1620
0
Merci
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.


.



Commenter la réponse de jordane45