2

bjqsスライダー（応答性は標準以下）の使用から、人気のあるFlexSliderの使用に切り替えました。bjqsスライダーを変更して、画面の中央に「現在の」画像を表示し、現在の画像の前後に前と次の画像を（部分的に）表示しました。ここでbjqsスライダーを使用して私の実装を確認し、私が何を求めているかを理解することができます。

現在、FlexSliderを使用しているので、これを行う方法を完全に理解することはできません。画像は左にフロートしているため、「現在の」画像はコンテナの左側に配置されます。誰かがこれを達成する方法を知っていますか？

現在、FlexSliderのデフォルトのスタイルとマークアップを次のJavaScriptで使用しています。

  $('.flexslider').flexslider({
    animation: "slide",
    itemWidth: 850,
  });
4

3 に答える 3

6

セクションの下のflexslider.cssファイル：

/* FlexSlider Necessary Styles*/

変化する：

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

これに：

.flexslider .slides img {width: auto; display: block; margin-left: auto; margin-right: auto;}
于 2013-05-30T00:02:51.067 に答える
4

私はこれと同じ問題を抱えていましたが、答えはCSSにあります。

私のHTMLフォーマットは次のようなものです：

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

そして、これから機能させるには、imgとliのCSSを変更する必要がありました。

.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;}

別のスライドの一部が左側に表示されていて、白が私のページレイアウトとちょうど一致しているため、私にとっては背景色を追加する必要がありました。

お役に立てば幸いです。

于 2013-04-25T17:43:11.243 に答える
1

Flexsliderで画像を水平方向に中央に設定するには、以下のようにflexslider.cssファイルに変更を加えます。

.flexslider .slides imgを見つけて、以下のように変更します。

.flexslider .slides img {
  width: auto;
  display: block;
  margin: 0 auto;
}
于 2019-02-15T16:30:32.377 に答える