bxslider jQuery plugin de

Estoy teniendo dificultades para centrar el plugin bxslider dentro de mi página HTML.bxslider jQuery plugin de

Aquí es mi 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>

y mi CSS:

body{ 
    background-color: #fff; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

#slider1 { 
    width: 700px; 
    height: 350px; 
    margin: 0 auto; 
    liststyle: none; 
}

Parece ser fuera del centro sin embargo. Aquí está la url:

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

No estoy seguro de por qué?

Fuente

2011-10-20 user559142

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

El plugin deslizante que transforma HTML, por lo que no utiliza el contenedor deslizante para centrar :)

Fuente

2011-10-20 18:07:36

esto parece no funcionar más. los estilos de ancho se agregan como estilo en línea. Me está volviendo loco. No quiero tener que usar '! Important'. ¿Hay otra manera? – rgin

¿Puede dar un enlace a una demostración ... Todavía debe ser capaz de crear un contenedor fuera de ella :) –

Nota: CSS siempre debe ser implementado en una hoja de estilos CSS externa, no el cuerpo del documento, como se informó en bxslider [sitio] (http://bxslider.com/examples/thumbnail-pager-2) – stom

Tiene que reemplazar los márgenes calculados estúpidos y anchos. Este plugin es genial pero son descuidados con su implementación y documentación. Simplemente conecte el ancho de su imagen debajo de donde tengo el 940 y esto debería solucionar su problema con el problema "fuera del centro".

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

.pager{ 
    width:940px !important; 
} 

#slider1 li{ 
    margin-left:0px !important; 
}

Fuente

2011-12-07 02:23:28

Respuesta

Cuestiones relacionadas