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 :

Carousel JQuery capricieux


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mai 2007
    Messages : 52
    Par défaut Carousel JQuery capricieux
    Bonjour a toutes et a tous.

    Je vous écris car je n'arrive pas a faire fonctionner mon carrousel :'(

    Il est censé m'afficher 4 images en même temps puis scroller automatiquement sur les 4 suivantes mais rien n'y fais malgré deux jours de recherche pour solutionner le problème.

    J'ai pourtant bien suivis les exemples sur de nombreux site/forum mais cela ne veux toujours pas fonctionner.

    Les carrousels testé sont liquidcarousel et jquerycarousellite ainsi que le carousel de fred (jquery.carouFredSel-5.5.0)

    Voici mes codes sources...

    La fonction :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("#slider1").carouFredSel({
    	items: {
    		visible: "variable"
    	},
    	scroll: {
    		items: 4,
    		duration: 1000,
    		pauseOnHover: true
    	},
    	auto: 500
    });
    et la liste qui devrait slider toute seule :

    Code : 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
    <div>
    <button class="prev"><<</button>
    <button class="next">>></button>
     
    <div class="slider1">
        <ul>
    			<li><a href="#"><img src="images/01.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/02.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/03.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/04.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/05.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/06.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/07.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/08.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/09.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/10.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/11.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/12.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/14.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/15.jpg" width="88" height="126" alt="image"/></a></li>
    			<li><a href="#"><img src="images/16.jpg" width="88" height="126" alt="image"/></a></li>
    		</ul>
    	</div>
    </div>
    Merci de votre aide

    P.S. : j'ai bien inclu les scriptes en debut de code

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    52
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 52
    Par défaut
    Salut

    tu ne dis pas exactement ce qui ose souci, mais par rapport aux codes que tu donnes, il y en a un autre fondamental, c'est le css

    sinon tu as $("#slider1") et <div class="slider1"> donc soit tu mets <div id="slider1"> soit $(".slider1")

  3. #3
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mai 2007
    Messages : 52
    Par défaut
    Salut, concernant le css j'ai juste mis :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     #slider1{list-style : none;}
    et ne vois pas quoi ajouter d'autre car sur le site ce n'est malheureusement pas stipulé :'(

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    52
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 52
    Par défaut
    salut, s'il y a une démo, va chercher la source et récupère le css.

    en tout cas si dans ta css tu as #slider1 dans ton js $("#slider1") il faut <div id="slider1"> et pas class.

    en tout cas, ton css n'est pas suffisant, il faut surement indiquer des dimensions, ton list-type porte sur la div slider1, alors que ça se rapporte à un élément ul.

    le mieux est que tu retournes à la source, tu copies le css et tu l'adaptes à ton besoin.

  5. #5
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mai 2007
    Messages : 52
    Par défaut
    Salut, peut importe le slideshow utilisé il ne fonctionne pas chez moi bien que j'importe les js adequat.

    Je cherche a faire un slideshow montrant les images 4 a 4.

    Meme en recopiant exactement la source d'ou je trouve le slideshow rien n'y fais :'(

    Pourtant ce que je cherche a faire reste relativement simple il me semble.

    En gros cela donnerait:

    <= [images01] [images02] [images03] [images04] =>

    Je suis desesperé, deja 3 jours a bossés dessus sans aucune avancée :'(

    A noté que j'ai dans la page un CountDown qui pourrait peut etre faire buger le slideshow

    EDIT (17h40){printf:"j'suis fatigué...";}; Je viens de trouver une alternative a mon souci mais il reste encore un bug d'affichage malheureusement. Cela est surement du au fais que j'ai un CountDown et un Carrousel sur une meme page... A verifier ^^

    Vous pourrez vous en rendre compte a l'adresse suivante :

    Cliquez ici l

Discussions similaires

  1. effet carousel et jquery modal
    Par sooprano dans le forum jQuery
    Réponses: 1
    Dernier message: 03/11/2011, 10h30
  2. Réponses: 10
    Dernier message: 13/04/2010, 10h05
  3. jquery slide carousel
    Par emmanuel.m dans le forum jQuery
    Réponses: 3
    Dernier message: 28/12/2009, 10h26
  4. Compatibilité carousel JQuery et Firefox
    Par Hakenaton dans le forum jQuery
    Réponses: 4
    Dernier message: 30/04/2009, 12h52

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