: owl-carousel first-child no .active does not work

Question

: owl-carousel first-child no .active does not work

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Good morning!

I'm using the owl-carousel plugin that has several items. I need to get the first and last items from the first page, but I can not.

The carousel renders like this:

<div class="owl-stage">
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item active">
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
</div>

The items on the first page are those that have the .active class. I tried some ways and it does not work:

 .owl-stage .owl-item.active:first-child {
    border:red;
 }
 .owl-stage .active:first-child {
    border:red;
 }
.owl-item.active:first-child {
    border:red;
 }

I can not use nth-child (n) because the amount of items varies a lot. So I need to do a way to always get the first and last .active, regardless of how many items it has.

Note: I'm sorry for the lack of accent, I'm using a vm and the keyboard is unconfigured ... :(

javascript css css3 pseudo-classes owl-carousel

asked by anonymous 11.02.2018 / 14:28

3 answers

how to put this here in ascending order? [duplicate] Hover with scale only in parent div

score 2 · Answer 1

You can use Callbacks to customize an event.

Not to repeat lines of code, we created a function:

function changeActive(e) {
    // Remove o seletor classe de todos item
    $('.owl-stage .owl-item').removeClass('ativo');
    setTimeout(function() {
        // Adiciona o seletor classe nos item da pagina ativa
        $('.owl-stage .active:first').addClass('ativo');
        $('.owl-stage .active:last').addClass('ativo');
    },0);
}

Add in style sheet:

.ativo {
    border: 1px solid red;
}

Create the plugin instance

var owl = $('.owl-carousel');
// Segundo a documentação, os eventos "initialize" e "initialized"
// devem ser anexados antes da inicialização do Carousel.
owl.on('initialized.owl.carousel', changeActive);
// Iniciamos o Carousel informando o callback
owl.owlCarousel({
    onChanged: changeActive,
    onTranslate: changeActive,
});

Example

function changeActive(e) {
  // Remove o seletor classe de todos item
  $('.owl-stage .owl-item').removeClass('ativo');
  setTimeout(function() {
    // Adiciona o seletor classe nos item da pagina ativa
    $('.owl-stage .active:first').addClass('ativo');
    $('.owl-stage .active:last').addClass('ativo');
  },0);
}
var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', changeActive);
owl.owlCarousel({
  onChanged: changeActive,
  onTranslate: changeActive,
});

* {
  box-sizing: border-box;
}
.ativo {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item"><h4>1</h4></div>
  <div class="item"><h4>2</h4></div>
  <div class="item"><h4>3</h4></div>
  <div class="item"><h4>4</h4></div>
  <div class="item"><h4>5</h4></div>
  <div class="item"><h4>6</h4></div>
  <div class="item"><h4>7</h4></div>
  <div class="item"><h4>8</h4></div>
  <div class="item"><h4>9</h4></div>
  <div class="item"><h4>10</h4></div>
  <div class="item"><h4>11</h4></div>
  <div class="item"><h4>12</h4></div>
</div>

Note: Sometimes when you run the code on the first buga page, it places the selector by class in the first and fourth items. I think it's a bug in the plugin itself.

Reference

Events

score 0 · Answer 2

YOUR CODE

Among your CSS rules, this is the only correct one.

 .owl-stage .active:first-child {
    border:red;
 }'

POSSIBLE PROBLEM

If it did not work for your project, maybe you're referencing the Owl in the wrong order. Here's how it would be:

<head>
    <meta charset="UTF-8">

    <title>Seu Título</title>

    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
    <link rel="stylesheet" href="style.css">
</head>

As the example above shows, the carousel files should be called before any other stylesheet you made. This, because of the CSS cascade.

CONCLUSION

Use the following CSS code:

.owl-stage .active:first-child {
        border:red;
}

.owl-stage .active:last-child {
        border:red;
}

And this HTML:

<head>
    <meta charset="UTF-8">

    <title>Seu Título</title>

    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
    <link rel="stylesheet" href="style.css">
</head>

If the problem persists

Use the keyword !important , like this:

.owl-stage .active:first-child {
        border:red !important;
}

.owl-stage .active:last-child {
        border:red !important;
}

This will force the browser to use these properties.

USEFUL LINKS

Here are some links to studying about CSS specificity:

Shay Howe ;
a a % 20specificity & gs_l = psy-ab.3 ... 3131.5704.0.6088.15.14.0.0.0.041.1991.0j5j5.10.0 .... 0 ... 1c.1.64.psy-ab..5.9.1771 .. Google .

It also has links to study about CSS selectors:

W3Schools ;
.

Now links to !important :

Zeno Rocha .

score 0 · Answer 3

CSS does not have a selector to dynamically grab elements either the first or last element based on the class .

A pseudo-class :first-child does not take the first element it owns class, it selects the first child-element of the parent-element from the selector, (did it seem confusing? See this answer ).

Now jQuery and pure JS can select these elements based on the class.

Example in jQuery:

var actives = $(".owl-stage .active"),
primeiro = $(actives).first(),
ultimo = $(actives).last();

primeiro.css("color","blue");
ultimo.css("color","red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="owl-stage">
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item active">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
</div>

Pure JavaScript example:

var actives = document.body.querySelectorAll(".owl-stage .active"),
primeiro = actives[0],
ultimo = actives[actives.length-1];

primeiro.style.color = "blue";
ultimo.style.color = "red";

<div class="owl-stage">
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item active">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
</div>