如何設置bxslider的樣式？

Question

這是我的jsFiddle

我想設置您可以看到的滑塊的樣式。

任何人都知道我該怎么辦？

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">    </script>
    <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<style>
    .list{
        text-align:center;
    }
</style>
    <ul class="bxslider">

                 <li class='list'>Hello</li>
                <li class='list'>How are you</li>
                <li class='list'>I am fine</li>
                <li class="list">slide1</li>
                <li class="list">slide2</li>
                <li class="list">slide3</li>
                <li class="list">slide4</li>
                <li class="list">slide5</li>
                <li class="list">slide6</li>
                <li class="list">slide7</li>
                <li class="list">slide8</li>
                <li class="list">slide9</li>
                <li class="list">slide10</li>
                <li class="list">slide11</li>

</ul>

Js--

  $(document).ready(function(){
    $('.bxslider').bxSlider({

        slideWidth:500,
        slideMargin: 20,
        minSlides: 2,
        maxSlides: 3
    });
  });

該代碼為我提供了不錯的滑塊，但我想為其設置樣式。 我不知道為什么，但是右箭頭不起作用。 真的我不知道解決方案。
我需要你的指導。
謝謝。

Answer 1

最簡單，最常見的方法是使用CSS。

使用提供的jsFiddle，您可以很容易地通過編輯CSS框來編輯滑塊，您可以這樣定義它：（如果您還不知道）

.bxslider {
 code:here;
}

您的滑塊也可以正常工作，我認為您遇到的問題是jsFiddle中包含了“結果”一詞，而您不小心單擊了該按鈕而不是按鈕。

Answer 2

確保在導入默認的bxslider css文件后聲明自定義CSS。 這樣，您可以覆蓋默認值。