找到你要的答案

Q:how can I style the bxslider?

Q:我怎么能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.

这是我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
    });
  });

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.

answer1: 回答1:

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.

做这个最简单的和最常见的方式,是使用CSS。

你提供的JSFiddle,你可以很容易地编辑滑块通过编辑CSS盒子,你会定义它是这样的:(如果你不知道)

.bxslider {
 code:here;
}

你的滑块也运行良好,我认为你有问题,“结果”是涵盖了JSFiddle你无意中点击按钮,而不是。

answer2: 回答2:

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

确保你声明你的自定义CSS导入默认bxslider CSS文件后。这样你就可以覆盖默认值。

javascript  jquery  css