Centering bxslider jquery plugin

jquery html css slider

10,493

Solution 1

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

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

Solution 2

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;
}

10,493

Author by

user559142

Updated on June 19, 2022

Comments

user559142 almost 2 years

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?