简体   繁体   中英

how can I style the bxslider?

This is my jsFiddle

I want to style the slider that you can see.

Anyone have any Idea how can I do it?

    <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
    });
  });

The code gives me the nice slider but i wants to style it . I don't know why but the right arrow is not working. Really i don't know the solution.
I need your guidance.
Thank you.

The easiest and most common way to do this, would be to use CSS.

With the jsFiddle you provided, you can quite easily edit the slider by editing the CSS box, you would define it like this: (If you didn't already know)

.bxslider {
 code:here;
}

Your slider is also working fine, I think the problem you are having is that the word "Result" is covering it up in jsFiddle and you're accidently clicking on that instead of the button.

Make sure that you declare your custom CSS after you import the default bxslider css file. That way you can override the defaults.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM