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
我不知道为什么?
#bx-wrapper {margin:0 auto; width:700px;}
Run Code Online (Sandbox Code Playgroud)
滑块插件会转换 HTML,因此不要使用滑块容器来居中:)