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

Fermé

traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 - 9 mai 2019 à 16:41
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 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

A voir également:

2 sliders différents sur même page avec transition différentes pour chaque slide
Supprimer une page word - Guide
Word numéro de page 1/2 - Guide
Page d'accueil iphone - Guide
Traduire une page web - Guide
2 comptes whatsapp - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
9 mai 2019 à 16:59

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.

.

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

Excel formule : compter le nombre de valeurs différentes

Chemin Logo du site de la Cité de l'espace

Comment ouvrir 2 documents Excel sur 2 écrans ?

Discussions similaires

Newsletters