Menu
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?
742
#bx-wrapper {margin:0 auto; width:700px;}
The slider plugin transforms you HTML, so dont use the slider container for centering :)
169
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
