FlexSlider: Center aktuelle Bild

Wechselte ich von der Verwendung der bjqs Schieberegler (es ist die Reaktionsfähigkeit war subpar), um mit der beliebten FlexSlider. Ich hatte modifiziert bjqs Schieberegler zur Anzeige der "aktuellen" Bild zentriert auf dem Bildschirm, die mit der vorherigen und nächsten Bilder angezeigt (teilweise) vor und nach dem aktuellen Bild. Sie können sehen, meine Implementierung mit dem bjqs Schieberegler hier um eine Idee zu bekommen für das, was ich bin nach.

Nun mit dem FlexSlider, ich kann einfach nicht herausfinden, einen Weg, dies zu tun. Die Bilder sind schwebte nach Links, so dass die "aktuellen" image wird positioniert, um der linken Seite des Containers. Weiß jemand einen Weg, dies zu erreichen?

Momentan bin ich nur mit den Standard-styles und markup für FlexSlider, mit dem folgenden javascript-Code:

  $('.flexslider').flexslider({
    animation: "slide",
    itemWidth: 850,
  });
Ich habe gerade versucht die akzeptierte Antwort auf eine frische Installation von Flexslider, und dies nicht Mitte das aktuelle Bild. Ich versuche, etwas zu erreichen, wie das Beispiel zeigte, nicht mit Glück. Gibt es sonst noch etwas, dass du getan hast, oder hast du ein live-Beispiel?

InformationsquelleAutor Trevan Hetzel | 2013-03-17

  1. 4

    Ich hatte gerade das gleiche Problem und die Antwort liegt in der CSS.

    Meine HTML-format ist wie folgt :

    <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>

    Und ich hatte zum ändern der CSS für die img und die li zu machen, arbeiten, von daher:

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

    :

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

    Für mich, die ich hatte, um die Hintergrundfarbe zu werden, weil eine weitere Folie zeigte bis auf die linke, und das weiß nur der passt zu meinem Seitenlayout.

    Hoffe, das hilft.

    InformationsquelleAutor Abernasty

  2. 6

    In der flexslider.css-Datei unter der Rubrik:

    /* FlexSlider Necessary Styles*/

    ändern: 

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

    :

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

    InformationsquelleAutor legit

  3. 0

    Um Bild-Horizontal-center in Flexslider, nur änderungen in flexslider.css - Datei, wie unten beschrieben.

    Finden .flexslider .Folien img und änderungen vornehmen, wie unten beschrieben.

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

    InformationsquelleAutor Viren Panchal

Schreibe einen Kommentar