Question

142

How to change css file of bx-slider, multiple sliders on a page

rated 0 times [ 143] [ 1] / answers: 1 / hits: 5085 / 11 Years ago, mon, january 20, 2014, 12:00:00

i'm developing a website with bx slider.

i need three sliders on a page for slide html content.

i have added a bx slider on page and customized it with css. i made changes in jquery.bxslider.css

now i'm adding another bx slider on a page. but it applies the css i modified on that new slider too. so i want to change CSS of the new added slider but not which one i modified. so as i think it needs two css files.

i tried css with nth-child but not working, it applies on both sliders.

so, how can i change css files in bx-slider ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shylaelisan

Add To Favorites

Follow

Total Points: 37

Total Questions: 94

Total Answers: 110

Location: Angola

Member since Tue, May 5, 2020

4 Years ago

shylaelisan questions

1 Error Argument is not assignable to parameter of type 'AxiosRequestConfig'

Sun, Jun 27, 21, 00:00, 3 Years ago

1 TypeScript - Element implicitly has an 'any' type [...] No index signature with a parameter of type 'string' was found on type

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Hooks Update Dictionary State

Mon, Jul 27, 20, 00:00, 4 Years ago

1 class array property value change using find method for all the elements in typescript

Thu, Feb 27, 20, 00:00, 4 Years ago

1 How to make disabled date and time in react datepicker?

Fri, Aug 23, 19, 00:00, 5 Years ago

View All

answered 11 Years ago morganm · Accepted Answer

You should just have to add class to each different bx-slider. You do not need 2 separate CSS files.

HTML

<ul class=bxslider one></ul>

<ul class=bxslider two></ul>

CSS

.bxslider.one {

    background: blue;

}

.bxslider.two{

    background: red;

}

If this is not working you can create a container for your bx-sliders and target the bx-wrapper class within:

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;

}