Centering bxslider plug-in jquery

Ho difficoltà a centrare il plug-in bxslider nella mia pagina html.Centering bxslider plug-in jquery

Ecco il mio 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>

e la mia CSS:

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

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

Sembra essere fuori centro però. Ecco l'url:

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

io non sono sicuro perché?

fonte

2011-10-20 user559142

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

Il plugin cursore si trasforma te HTML, in modo da non utilizzare il contenitore di scorrimento per il centraggio :)

fonte

2011-10-20 18:07:36

questo non sembra funzionare più. gli stili di larghezza vengono aggiunti come stile in linea. Mi sta facendo impazzire. Non voglio dover usare '! Important'. C'è un altro modo? – rgin

Puoi fornire un collegamento a una demo ... Dovresti comunque essere in grado di creare un contenitore all'esterno :) –

Nota: i CSS devono sempre essere implementati in un foglio di stile CSS esterno, non nel corpo del documento, come informato in bxslider [sito] (http://bxslider.com/examples/thumbnail-pager-2) – stom

Bisogna ignorare i margini calcolati stupidi e larghezze. Questo plugin è ottimo ma sono sciatti con la loro implementazione e documentazione. Basta inserire la larghezza delle immagini qui sotto dove ho 940 e questo dovrebbe risolvere il problema con il problema "fuori centro".

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

.pager{ 
    width:940px !important; 
} 

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

fonte

2011-12-07 02:23:28

Centering bxslider plug-in jquery

risposta

Problemi correlati