居中 bxslider jquery 插件

发布于 2024-12-10 22:24:04 字数 1327 浏览 0 评论 0原文

我在将 bxslider 插件集中在 html 页面中时遇到困难。

这是我的 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

我不知道为什么？

原文

I am having difficulties centering the bxslider plugin within my html page.

Here is my 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>

and my CSS:

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

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

It appears to be off centre though. Here is the url:

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

I'm not sure why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九局 2024-12-17 22:24:04

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

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

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

The slider plugin transforms you HTML, so dont use the slider container for centering :)

回复收藏 0 原文

哑剧 2024-12-17 22:24:04

您必须覆盖愚蠢的计算边距和宽度。这个插件很棒，但他们的实现和文档很草率。只需将您的图像宽度插入到我的 940 下面，这应该可以解决您的“偏离中心”问题。

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

.pager{
    width:940px !important; 
}

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

You have to override the stupid calculated margins and widths. This plugin is great but they are sloppy with their implementation and documentation. Just plug in your image widths below where I have 940 and this should fix your issue with the "off-center" problem.

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

.pager{
    width:940px !important; 
}

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

回复收藏 0 原文

~没有更多了~