CODEWITHSUNDEEP
javascriptjqueryhtmlcssowl-carousel
twan
twan

Reputation: 2659

Use different css with multiple owl carousels

How do you use different CSS on the controls of multiple owl carousels? The div with the controls is generated in JS, and the css applies to all owl carousels. How can I target the controls of a single carousel?

I want this code only applied on one owl carousel:

.owl-theme .owl-controls{
    margin-top: -40px;
    text-align: center;
}

Upvotes: 2

Views: 277

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

I believe the best solution is to wrap the carousel with a wrapper div with an id such as this one:

<div id="something">
  <div class="owl..... >
</div>

And use the id in the CSS like #something .owl-theme .owl-controls to target it:

#something .owl-theme .owl-controls{
    margin-top: -40px;
    text-align: center;
}

Upvotes: 1

Related Questions