Home/ Questions/Q 6737603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:16:06+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #bx-wrapper  {margin:0 auto; width:700px;}

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

    • 0