18041 sujets

Questions générales et questions de débutants

[Résolu] Centrer un objet Carousel dans une page

Bonjour à tous Smiley smile

EDIT : J'aurais peut-être du poster dans Jquery, mais je crois que ma demande trouvera réponse dans le CSS. Chers modos, si je me trompe... Smiley cligne

Je découvre JQuery, je suis actuellement en train d'essayer de modifier (un peu) le fameux script JCarousel trouvé ici.
J'ai réussi à apporter quelques modifs comme la taille, les espacements, lé fréquence de slide... Mais je bute sur quelque chose qui a son importance : centrer les images dans le bloc conteneur.

J'ai mis mon test en ligne ici, et ça fonctionne plutôt pas mal
mais je voudrais qu'au chargement de la page (et le reste du temps) chaque image slidée soit centrée et laisse entrevoir les autres dans l'espace qui reste de chaque coté (selon la résolution et la taille de l'écran).


Oui, je voudrais que l'image "en cours" soit toujours placée au centre comme IMAGE02 dans l'image au-dessus.
J'espère que mon explication tient la route, en tout cas je sèche dans mes tentatives Smiley ohwell

merci
Modifié par miltonis (30 Jun 2010 - 19:23)
Hello,

Je pense que tu peux y arriver en appliquant tout simplement un margin-left sur ton <li>.

Si le conteneur et l'image centrale ont une largeur fixe, tu obtiendras la valeur du margin-left en résolvant l'équation suivante :

X = (Y-Z)/2

où
X = margin-left du <li>, à trouver
Y = largeur conteneur
Z = largeur image centrale

EDIT : Je viens de relire l'énoncé, en fait tu souhaites conserver une largeur fluide. Du coup, pas d'autres solutions que d'utiliser jQuery pour calculer le margin-left :

"margin-left <li>" = ("largeur viewport" - "largeur image centrale") / 2
Modifié par BeliG (25 Jun 2010 - 11:35)
Salut beLig,

Mais si j'applique un margin-left au <li>, cela uara un impact sur tous les autres <li> non ?
Ou alors trouver un moyen pour appliquer le margin au <li> "en cours"... ?

Pour info, j'ai réussi à faire ça, en ajoutant ce CSS :
.jcarousel-skin-name {
    width: 100%;
}
.jcarousel-clip-horizontal {
    margin: 0 auto;
    width: 964px; /*largeur de l'image et du <li>*/
    padding: 0 10%;
}

C'est le padding(left-right) de 10% qui donne l'espacement sur les cotés, mais je ne sais pas comment faire pour lui dire de prendre tout l'espace restant sur les cotés et ainsi laisser entrevoir un bout des images précédente et suivante.

merci de tes conseils
BeliG a écrit :
Hello,

EDIT : Je viens de relire l'énoncé, en fait tu souhaites conserver une largeur fluide. Du coup, pas d'autres solutions que d'utiliser jQuery pour calculer le margin-left :

"margin-left <li>" = ("largeur viewport" - "largeur image centrale") / 2


je viens de lire ton Edit Smiley smile
Je ne trouve pas où effectuer cette action, est-ce dans les fichier JS ?

Je devrais peut-être créer un nouveau post dans la section JQuery ?
Re,

Alors, j'avais fait quelques tests concluants sur la première version que tu avais uploadé.

Voilà ce que tu dois faire :
1°) Remettre comme c'était avant, en retirant tous les styles que tu as mis sur jcarousel-clip-horizontal,
2°) Modifier un peu ton script en ajoutant ces quelques lignes de jQuery (ça se passe dans ton <head>) :
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 3,
        wrap: 'circular',
        initCallback: mycarousel_initCallback
    });
	
	/*** Code pour centrer l'image l'image centrale par rapport au viewport ***/
	var width_img = 964; // Largeur d'une image

	var margin_left = (parseInt($(window).width()) - width_img) / 2;
	$('#mycarousel > li:first-child').css('margin-left', margin_left + 'px');

});
La marge est appliquée seulement au premier <li> de ta liste. Pour cela j'ai utilisé le sélecteur d'enfant (facultatif si tu n'imbriques pas d'autres <li>) et la pseudo-classe :first-child.

Si tu décides d'utiliser des images avec des largeurs différentes, tu n'auras qu'à modifier la variable width_img.

Autre chose, il faudra sans doute fixer une hauteur quelque part (genre sur le <ul> ou le conteneur du carousel) avec un overflow:hidden, j'ai remarqué un petit bug lors du défilement des deux premières images.

Voilà, si t'as besoin de plus d'infos hésite pas. Smiley smile

EDIT : Je viens de capter un truc qui va pas dans ma solution. Smiley sweatdrop
Je me repenche un peu dessus et je te tiens au courant.
Modifié par BeliG (29 Jun 2010 - 14:00)
Je viens de tester cette solution, ça semble fonctionner. Elle consiste à décaler la liste plutôt que le premier élément (ce qui provoquait un trou, puis un décalage au bout d'un moment).
jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
        auto: 3, 
        wrap: 'circular', 
        initCallback: mycarousel_initCallback 
    }); 
     
    /*** Code pour centrer l'image l'image centrale par rapport au viewport ***/ 
    var width_img = 964; // Largeur d'une image 

    var decalage_left = (parseInt($(window).width()) - width_img) / 2; 
    decalage_left = decalage_left - width_img;
    $('#mycarousel').css('left', decalage_left + 'px'); 
 
});
Le bout de code : 
decalage_left = decalage_left - width_img;
Permet de démarrer le carousel une image plus loin (afin d'éviter un blanc), j'ai pas réussi à faire fonctionner le paramètre "start" de la doc...
Salut Belig,

et merci de te pencher sur mon cas Smiley smile
j'ai intégré le code que tu m'as indiqué dans le <head> et j'ai pour résultat ceci :
jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...

Pour info, dans le BODY
<body>
  <div class="jcarousel-skin-name">
  <div class="jcarousel-container">
    <div class="jcarousel-clip">
  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="images/001.gif" width="964" height="300" alt="" /></li>
    <li><img src="images/002.gif" width="964" height="300" alt="" /></li>
    <li><img src="images/003.gif" width="964" height="300" alt="" /></li>
    <li><img src="images/004.gif" width="964" height="300" alt="" /></li>
  </ul>
    </div>
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
  </div>
  </div>
</body>


Je m'y prends mal ?
Modifié par miltonis (30 Jun 2010 - 19:24)
En effet, quand je te disais d'ajouter mon code, ça sous-entendait ne pas garder le script que tu as déjà pour le carousel. Smiley langue

Tu as un doublon, je pense que le problème vient de là. Tu n'as pas touché au code HTML / CSS ?

Voici le code entier que tu devrais normalement avoir dans la balise <script> :
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {  
    jQuery('#mycarousel').jcarousel({  
        auto: 3,  
        wrap: 'circular',  
        initCallback: mycarousel_initCallback  
    });  
      
    /*** Code pour centrer l'image l'image centrale par rapport au viewport ***/  
    var width_img = 964; // Largeur d'une image  
 
    var decalage_left = (parseInt($(window).width()) - width_img) / 2;  
    decalage_left = decalage_left - width_img; 
    $('#mycarousel').css('left', decalage_left + 'px');  
  
});

Modifié par BeliG (30 Jun 2010 - 09:13)
Oui, je n'ai aps réfléchi, ça m'apprendra... en tout cas ça fonctionne à merveille !!!!
Merci BeliG Smiley smile
Sujet clos
Aller à