FlexSlider: Centre de l'image courante

Je suis passé de l'utilisation de l' bjqs curseur (c'est-réactivité médiocre) à l'aide de la populaire FlexSlider. J'avais modifié le bjqs curseur pour afficher le "courant" de l'image au centre de l'écran, avec la précédente et la suivante, les images affichées (partiellement) avant et après l'image courante. Vous pouvez voir ma mise en œuvre à l'aide de la bjqs curseur ici pour avoir une idée de ce que je suis après.

Maintenant avec le FlexSlider, je n'arrive pas à trouver un moyen de le faire. Les images sont flottaient à gauche, de sorte que le "courant" image est placée sur le côté gauche du conteneur. Quelqu'un connais un moyen pour accomplir cette?

Droit maintenant, je suis juste en utilisant les styles par défaut et de la majoration pour FlexSlider, avec le code javascript suivant:

  $('.flexslider').flexslider({
    animation: "slide",
    itemWidth: 850,
  });
  • J'ai juste essayé la accepté de répondre à une nouvelle installation de Flexslider, et ce n'est pas le centre de l'image actuelle. Je suis en train d'accomplir quelque chose comme dans l'exemple que tu nous a montré, avec pas de chance. Est-il autre chose que vous avez, ou avez-vous un exemple vivant?
InformationsquelleAutor Trevan Hetzel | 2013-03-17
  1. 4

    J'ai juste eu ce même problème et la réponse se trouve dans le CSS.

    Mon format HTML est comme ceci :

    <div id="slider" class="flexslider">
<ul class="slides" >
<li><img src='images/slideshows/image04.jpg' /></li>
<li><img src='images/slideshows/image06.jpg' /></li>
<li><img src='images/slideshows/image07.jpg' /></li>

</ul>
</div>

    Et j'ai dû changer la CSS pour l'img et de la li pour le faire fonctionner à partir de ce:

    .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} 
.flexslider .slides img {width: 100%; display: block;}

    à ceci:

    .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; background-color: #ffffff; text-align: center;} 
.flexslider .slides img {width: auto; display: inline;}

    Pour moi, j'ai dû ajouter de la couleur d'arrière-plan parce qu'une partie d'une autre diapositive était apparaître sur la gauche, et le blanc correspond à ma mise en page.

    Espère que ça aide.

    InformationsquelleAutor Abernasty
  2. 6

    Dans le flexslider.fichier css dans la section:

    /* FlexSlider Necessary Styles*/

    changement: 

    .flexslider .slides img {width: auto; display: block;}

    à ceci:

    .flexslider .slides img {width: auto; display: block; margin-left: auto; margin-right: auto;}
    InformationsquelleAutor legit
  3. 0

    Pour définir l'Image Horizontalement centre Flexslider, il suffit de faire des changements dans flexslider.css fichier comme ci-dessous.

    Trouver .flexslider .diapositives img et d'apporter les changements ci-dessous.

    .flexslider .slides img {
  width: auto;
  display: block;
  margin: 0 auto;
}
    InformationsquelleAutor Viren Panchal