我如何设计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
    });
  });

代码给了我很好的滑块，但我想要它的样式。 我不知道为什么，但右箭头不起作用。我真的不知道解决方案。
我需要你的指导。
谢谢。