Центрирующий плагин bxslider jquery - PullRequest
Новая
       4

Центрирующий плагин bxslider jquery

6 голосов
/ 20 октября 2011

У меня проблемы с центрированием плагина 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;
}

Itкажется, не по центру, хотя.Вот URL:

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

Я не уверен, почему?

Ответы [ 2 ]

4 голосов
/ 20 октября 2011 
#bx-wrapper  {margin:0 auto; width:700px;}

Плагин слайдера преобразует вас в HTML, поэтому не используйте контейнер слайдера для центрирования:)

3 голосов
/ 07 декабря 2011

Вы должны переопределить глупые вычисленные поля и ширину. Этот плагин великолепен, но он небрежно относится к своей реализации и документации. Просто вставьте ширину вашего изображения ниже, чем у меня 940, и это должно решить вашу проблему с «смещенным центром». 

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

.pager{
    width:940px !important; 
}

#slider1 li{
    margin-left:0px !important;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...