居中 bxslider jquery 插件
Posted
技术标签:
【中文标题】居中 bxslider jquery 插件【英文标题】：Centering bxslider jquery plugin 【发布时间】：2011-12-12 00:19:38 【问题描述】：我无法在我的 html 页面中将 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>
还有我的 CSS：
body
background-color: #fff;
margin: 0;
padding: 0;
text-align: center;
#slider1
width: 700px;
height: 350px;
margin: 0 auto;
liststyle: none;
但它似乎偏离了中心。这是网址：
http://everry.com/new/customise/customisenow.html
我不知道为什么？
【问题讨论】：
【参考方案1】：#bx-wrapper margin:0 auto; width:700px;
滑块插件可以转换 HTML，所以不要使用滑块容器来居中 :)
【讨论】：
这似乎不再起作用了。宽度样式作为内联样式添加。它快把我逼疯了。我不想使用!important。还有其他方法吗？
你能给一个演示的链接吗...你应该仍然可以在它之外创建一个容器:)
注意：CSS 应该始终在外部 CSS 样式表中实现，而不是在文档正文中实现，如 bxslider site中所述【参考方案2】：
您必须覆盖愚蠢的计算边距和宽度。这个插件很棒，但他们的实现和文档很草率。只需在我有 940 的地方插入您的图像宽度，这应该可以解决您的“偏离中心”问题。
.bx-wrapper, .bx-window
margin:0 auto; width:940px !important;
.pager
width:940px !important;
#slider1 li
margin-left:0px !important;
【讨论】：
以上是关于居中 bxslider jquery 插件的主要内容，如果未能解决你的问题，请参考以下文章
jQuery补充，基于jQuery的bxslider轮播器插件