居中bxslider jquery插件

use*_*142 6 html css jquery slider

我难以将hx页面中的bxslider插件集中在一起.

这是我的HTML:

<!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>
Run Code Online (Sandbox Code Playgroud)

和我的CSS:

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

#slider1 {
    width: 700px;
    height: 350px;
    margin: 0 auto;
    liststyle: none;
}
Run Code Online (Sandbox Code Playgroud)

它似乎偏离中心.这是网址:

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

我不知道为什么?

Mar*_*sen 4

#bx-wrapper  {margin:0 auto; width:700px;}
Run Code Online (Sandbox Code Playgroud)

滑块插件会转换 HTML,因此不要使用滑块容器来居中:)