All geek questions in one place

Jquery bxslider plugin centering

I'm having difficulty centering the bxslider plugin in 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 seems that he is not in the center. Here is the url:

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

I'm not sure why?

+6
source share
2 answers
 #bx-wrapper {margin:0 auto; width:700px;}

The slider plugin will convert your HTML, so do not use the slider container to center :)

+4
source

You have to redefine the silly calculated fields and width. This plugin is great, but they are sloppy with their implementation and documentation. Just plug in the image width below where I have 940, and this should fix the "off center" problem.

 .bx-wrapper, .bx-window { margin:0 auto; width:940px !important; } .pager{ width:940px !important; } #slider1 li{ margin-left:0px !important; }
+3
source

Source: https://habr.com/ru/post/899723/

More articles:


All Articles