0

サイトで flexslider をカルーセル バナーとして使用しようとしています。何らかの理由で、スライダーをサイトの水平方向の中央に配置できません。私のコードは次のとおりです。

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="styles_test.css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide"
    });
  });
</script>
</head>

<body>
<div class="slideshow">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/slideshow_preview.png" alt="Slide1"/>
            </li>
            <li>
                <img src="images/placehold.gif" alt="Slide1"/>
            </li>
            <li>
                <img src="images/placehold.gif" alt="Slide1"/>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

style_test.css:

.slideshow {
    text-align: center;
}

.flexslider {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

上記の CSS でわかるように、要素を中央に配置するために 2 つの異なる方法を使用しました。残りの flexslider.css および jquery.flexslider.js ファイルは、この Web サイトにあります。どちらのファイルも変更されておらず、問題は flexslider.css ファイルのどこかにあると思います。私がここにいるのは初めてなので、何か見逃した場合はお知らせください。事前にご協力いただきありがとうございます。

4

4 に答える 4

4

これを書く

   .slides {
        width: 100%!important;
        text-align: center;
    }
    .slides li {
         display: inline-block!important; 
        *display: inline!important; 
        float: none!important;
    }
于 2014-02-26T19:16:56.543 に答える
2

@ the.big.lebowski あなたのソリューションは魅力的でした!

ヒント: .flexslider{white-space: nowrap;} を追加して、ウィンドウのサイズ変更時に li がスタックしないようにします。

于 2014-09-25T07:17:46.513 に答える
0

私はついに問題を理解しました、そしてそれは痛々しいほど明白でした. flexslider.css ファイルには、ブラウザのリセットが含まれていました。したがって、独自のカスタム css ファイルの前にそのファイルをロードする必要がありました。

于 2013-07-20T16:25:38.333 に答える
0

the.big.lebowski と gopalraju の回答に基づいて構築すると、これはうまくいきました。

  // Center the slides.
  .slides {
    width: 100% !important;
    text-align: center;
    li {
      white-space: initial;
      width: 100%;
      display: inline-block !important;
      float: none !important;
      vertical-align: top;
    }
  }

于 2015-11-05T21:59:38.600 に答える