Centrowanie bxslider jquery plugin

Mam trudności z centrowaniem wtyczki bxslider na mojej stronie html.Centrowanie bxslider jquery plugin

Tu jest mój 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>

i mój CSS:

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

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

Wydaje się być poza centrum choć. Oto url:

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

Nie jestem pewien, dlaczego?

Źródło

2011-10-20 user559142

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

Wtyczka suwak przekształca ty HTML, więc nie używaj pojemnika suwak do centrowania :)

Źródło

2011-10-20 18:07:36

to już nie działa. style szerokości są dodawane jako stylizacja w linii. To doprowadza mnie do szału. Nie chcę używać '! Important'. Czy istnieje inny sposób? – rgin

Czy możesz podać link do wersji demonstracyjnej ... Nadal powinieneś być w stanie utworzyć kontener poza nim :) –

Uwaga: CSS powinien zawsze być implementowany w zewnętrznym arkuszu stylów CSS, a nie w dokumencie, jak poinformowano w bxslider [strona] (http://bxslider.com/examples/thumbnail-pager-2) – stom

Trzeba zastąpić głupie obliczone marginesy i szerokościach. Ta wtyczka jest świetna, ale są one niechlujne ze względu na ich implementację i dokumentację. Wystarczy podłączyć szerokość obrazu poniżej miejsca, w którym mam 940, a to powinno rozwiązać problem z "niecentralnym" problemem.

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

.pager{ 
    width:940px !important; 
} 

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

Źródło

2011-12-07 02:23:28

Centrowanie bxslider jquery plugin

Odpowiedz

Powiązane problemy