如何更改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-slide创建一个容器，并将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;
}