如何更改bx-slider的css文件,页面上的多个滑块

Question

我正在开发一个带有bx滑块的网站.

我需要在页面上使用三个滑块来播放幻灯片内容.

我在页面上添加了一个bx滑块并使用css进行了自定义.我在jquery.bxslider.css中进行了更改

现在我在页面上添加另一个bx滑块.但它也适用于我在新滑块上修改过的css.所以我想改变新添加的滑块的CSS但不是我修改的那个.所以我认为它需要两个css文件.

我尝试使用nth-child但没有工作的css,它适用于两个滑块.

那么,我如何更改bx-slider中的css文件？

Answer 1

您应该只需要为每个不同的bx滑块添加类.您不需要2个单独的CSS文件.

HTML

<ul class="bxslider one"></ul>
<ul class="bxslider two"></ul>

CSS

.bxslider.one {
    background: blue;
}
.bxslider.two{
    background: red;
}

如果这不起作用,您可以为bx-slider创建一个容器,并bx-wrapper在以下内容中定位该类:

HTML

<div class="slider-one">
    <ul class="bxslider"></ul>
</div>
<div class="slider-two">
    <ul class="bxslider"></ul>
</div>

CSS

.slider-one .bx-wrapper .bx-viewport{
    background: blue;
}
.slider-two .bx-wrapper .bx-viewport{
    background: red;
}