IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

[mostSlider] Fonctionnement du slide


Sujet :

jQuery

  1. #1
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut [mostSlider] Fonctionnement du slide
    Bonsoir à tous,
    J'étais persuadé d'avoir lancé une discussion mais je ne la retrouve pas en ligne
    J'ai un slider qui slide quand il veut, souvent c'est du image par image. Pourtant j'ai bien vérifié la démo...
    D'autre part, les arrow (flèche gauche et droite) n'apparaissent pas non plus.
    je vous donne mes CSS :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
            .slider-wrapper{
                    margin: auto;
                    width: 50%;
                    height: auto;
                    position: relative;
    				background-color: black;
    				padding-top: 100px;
    								padding-bottom: 100px;
     
            }
            .slider-wrapper.default>div{
                    display:none
            }
            .slider-wrapper.default>div #slides{
    	font-weight: 400;
    	color: #000;
    	line-height: normal
            }
            .slider-wrapper.default>div #slides img{
                    border:0
            }
            .slider-wrapper.default>div #slides>a{
                    line-height:0px
            }
            .slider-wrapper.default>div #slides h1,
                                    .slider-wrapper.default>div #slides h2,
                                    .slider-wrapper.default>div #slides h3,
                                    .slider-wrapper.default>div #slides h4{
    	padding: 1% 3% 1% 3%;
    	color: #000;
    	background-color: #000000;
    	line-height: normal;
    	text-align: center
            }
            .slider-wrapper.default>div #slides span,
                                    .slider-wrapper.default>div #slides p{
                    line-height:normal
            }
            .slider-wrapper.default>div .social{
                    position:absolute;
                    top:4%;left:3%;z-index:10000
            }
            .slider-wrapper.default>div .social div{
                    float:left;margin-right:10px
            }
            .slider-wrapper.default>div #bullets{
                    height:10px;position:absolute;
                    top:4%;
                    right:3%;
                    z-index:10000
            }
            .slider-wrapper.default>div #bullets .bullet{
                    min-height:12px;
                    min-width:12px;
                    border-radius:6px;
                    margin-left:5px;
                    float:left;
                    cursor:pointer;
                    background-color:#b4b4b4;
                    background-color:rgba(255,255,255,0.6)
                    }
                    .slider-wrapper.default>div #bullets .bullet:hover{
                            background-color:#fff
                    }
                    .slider-wrapper.default>div #bullets .bullet.selected{
                            background-color:#fff
                    }
            .slider-wrapper.default>div #left{
                    position:absolute;
                    width:47px;
                    height:47px;
                    background-image:url(img/arrow.png);
                    left:5%;
                    top:50%;
                    margin-top:-24px;
                    z-index:999999;
                    cursor:pointer
            }
            .slider-wrapper.default>div #right{
                    position:absolute;
                    width:47px;
                    height:47px;
                    background-image:url(img/arrow.png);
                    background-position:right top;
                    right:5%;
                    top:50%;
                    margin-top:-24px;
                    z-index:999999;
                    cursor:pointer
            }
    ainsi que le
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
            <div class="slider-wrapper default">
    		    <div id="slider"> <a href="http://500px.com/photo/47412316" target="_blank"><img src="images/1.jpg" /></a> <a href="http://500px.com/photo/39845938" target="_blank"><img src="images/2.jpg" /></a> <a href="http://500px.com/photo/43565628" target="_blank"><img src="images/3.jpg" /></a> </div>
    	      </div>
    et le JS qui va avec :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
            <script>
            	$(document).ready(function(){
    	        	var slider = $("#slider").mostSlider({
    	        		animation: 'slide',
    		        	aniMethod: 'auto',
    	        	});
            	});
            </script>
    Le slider se trouve au dessus de l'Iframe YOUTUBE, si vous désirez le voir en live :
    http://lapagetest.fr
    En espérant que vous pourrez m'aider.
    Merci et bonne soirée,
    dh

  2. #2
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Encore une fois, si tu ne donnes pas le lien* vers la page où tu as copié ce code, on ne peut pas t'aider.

    * En tout cas, ce n'est pas à nous d'aller le chercher (mostSlider)

    Moi, j'utilise celui-ci :


  3. #3
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonsoir jreaux,
    https://lapagetest.fr/mostslider-mas...ing/index.html
    Je ne retrouve pas le lien de la démo, mais je te donne le code que tu désires ainsi que les fichiers js si tu veux.
    Merci à toi et bonne soirée,
    dh

  4. #4
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Le lien n'est plus actif.

  5. #5
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138

  6. #6
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Et donc ?

    Le slider fonctionne, non ?

  7. #7
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    non, pas sur mon site. Il fait souvent du image par image et je n'ai pas les "arrows"
    http://lapagetest.fr
    Sinon, ça roule...

  8. #8
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonjour à tous,
    Aucune idée ? Possibilité de vous envoyer le fichier original .zip par mail...
    Merci beaucoup et bon week-end !
    dh

  9. #9
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Bonjour,

    Tu continues à inclure des scripts et autres... SANS COMPRENDRE....


    Tu as déjà (ligne 571) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    Mais tu rajoutes (ligne 685) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    Ces 2 codes initialisent jQuery, MAIS avec des versions différentes !

    De plus, ce 2ème script court-circuite le 1er, et bootstrapValidator() n'est plus reconnu...

    Tu poursuis avec (ligne 686) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="scripts/modernizr-2.6.2.min.js"></script>
    ...alors que modernizr a déjà été, lui aussi initialisé (ligne 575).

    BREF : FAIS LE MÉNAGE !

    • SUPPRIME les 2 scripts lignes 685 et 686, et ça devrait déjà aller mieux.

  10. #10
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Entendu jreaux62,
    Cela sera fait dès ce soir.
    Une seule lib jquery suffit ?
    Merci beaucoup.
    Bonne fin de journée,
    dh

  11. #11
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    J'ai obéi à mon maître
    La messagerie fonctionne de nouveau (je n'étais pas inquiet pour cela), mais je n'ai plus de slider
    Je tente de comprendre, je progresse très lentement (en CSS) entre mes minutes de taff, mais les lib.... les lib...
    ça me fait peur !
    J'ai mis la page test en ligne.
    Ce n'est pas qu'une page test, c'est mon gabarit final. Je ne m'amuse pas (si, ça me plaît), mais j'ai un objectif.
    Un objectif que j'ai depuis 7 ans et que j'ai laissé tomber 6 ans, après tant de travail.
    Et jreaux62, je m'en rappelle pask'il m'a trouvé à l'époque, après des jours de recherches et d'échanges, dans un fichier CSS infinissable, un truc que personne n'avait trouvé. Un "hidden" à mettre je crois
    Bon week-end et MERCI,
    dh

  12. #12
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Citation Envoyé par dhillig Voir le message
    ...mais les lib.... les lib...
    ça me fait peur !...
    Il suffit de comprendre (encore !) à quoi ça sert...

    • initialiser 1 lib. (jQuery, par ex.) permet aux scripts (concernés) de fonctionner
    • initialiser 1 lib. (jQuery, par ex.) de 2 versions différentes : ça peut entrer en conflit et planter les scripts

  13. #13
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    wi, mais pour le coup... "mon" beau slider ?
    Je ne comprends rien mais je me donne de la peine pourtant !

  14. #14
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonjour tout le monde,
    Problèmes de compatibilité (conflit entre les libs).
    Sujet résolu.
    Merci et bonne journée,
    dh

  15. #15
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonjour jreaux62,
    Toujours un soucis de conflit avec la messagerie.
    As-tu une idée ?
    Bonne journée,
    dh (le créateur de Frankenstein)

  16. #16
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Uncaught TypeError: $(...).bootstrapValidator is not a function
    Où est ce script ? :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>
    Si tu ajoutes ou supprimes des scripts sans savoir à quoi ils servent, il ne faut pas t'étonner...

  17. #17
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonsoir jreaux62,
    J'ai fait le ménage... un peu trop vite
    Si tu ajoutes ou supprimes des scripts sans savoir à quoi ils servent, il ne faut pas t'étonner...
    C'est exactement ça. Je tenterai d"être plus vigileant
    ça fonctionne de nouveau... MERCI
    Bon week-end,
    dh

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MooTools] Effet slide qui ne fonctionne pas sous chrome
    Par micker dans le forum Bibliothèques & Frameworks
    Réponses: 24
    Dernier message: 29/06/2011, 18h12
  2. [Turbo Pascal] TP7 fonctionne en QWERTY
    Par callahan dans le forum Turbo Pascal
    Réponses: 9
    Dernier message: 08/02/2003, 22h49
  3. Prb de fonctionnement dans SaveDialog avecInitialDir
    Par boyerf dans le forum Composants VCL
    Réponses: 4
    Dernier message: 12/12/2002, 22h46
  4. ca ne fonctionne pas (generateur auto-incrémentant)
    Par tripper.dim dans le forum SQL
    Réponses: 7
    Dernier message: 26/11/2002, 01h10
  5. Fonctionnement de la compression DivX
    Par Rodrigue dans le forum Algorithmes et structures de données
    Réponses: 2
    Dernier message: 20/09/2002, 15h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo