センタリングbxslider jqueryプラグイン

htmlページ内でbxsliderプラグインをセンタリングするのが困難です。センタリングbxslider jqueryプラグイン

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <title>Everry - Customise Now Proto</title> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script src = "js/jquery.bxSlider.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $('#slider1').bxSlider(); 
      }); 
    </script> 

</head> 
<body> 
<h1>Customise Now Prototype</h1> 
<div align = "center" id="slider1"> 
    <div>Slide one content</div> 
    <div>Slide two content</div> 
    <div>Slide three content</div> 
    <div>And so on...</div> 

</div> 
</body> 
</html>

と私のCSS：

body{ 
    background-color: #fff; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

#slider1 { 
    width: 700px; 
    height: 350px; 
    margin: 0 auto; 
    liststyle: none; 
}

しかし、中心から外れように見える

は、ここに私のHTMLです。ここではURLは次のとおりです。

http://everry.com/new/customise/customisenow.html

私がなぜわかりませんか？

出典

2011-10-20 user559142

#bx-wrapper {margin:0 auto; width:700px;}

スライダープラグインを使用すると、HTMLは、そうあなたが愚かな計算されたマージンと幅を上書きする必要が

出典

2011-10-20 18:07:36

これはもう機能していないようです。幅のスタイルはインラインスタイルとして追加されます。それは私のナッツを運転しています。私は '！important'を使う必要はありません。別の方法がありますか？ – rgin

デモへのリンクを付けることができますか？まだコンテナを作成することはできません:) –

注：CSSは、bxsliderに記載されているように、文書の本文ではなく、常に外部CSSスタイルシートに実装する必要があります[site]（http://bxslider.com/examples/thumbnail-pager-2） – stom

:)センタリングするためのスライダーコンテナを使用いけない変換します。このプラグインは素晴らしかったが、実装や文書化にはうんざりだ。私が940を持っている場所の下にイメージの幅を差し込むだけで、問題が「中心から離れた」問題で解決するはずです。

.bx-wrapper, .bx-window { 
    margin:0 auto; width:940px !important; 
} 

.pager{ 
    width:940px !important; 
} 

#slider1 li{ 
    margin-left:0px !important; 
}

出典

2011-12-07 02:23:28

センタリングbxslider jqueryプラグイン

答えて

関連する問題