0

Bom dia!

Estou usando o plugin owl-carousel que possui varios itens. Preciso pegar o primeiro e o ultimo item da primeira pagina, mas nao estou conseguindo.

O carousel renderiza assim:

<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>

O itens da primeira pagina sao os que possuem a classe .active. Tentei de algumas formas e nao funciona:

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

Nao posso usar nth-child(n) pois a quantidade de itens varia muito. Entao preciso fazer de uma forma a pegar sempre o primeiro e o ultimo .active, independente de quantos itens tem.

obs.: desculpe a falta de acento, estou usando um vm e o teclado esta desconfigurado... :(

3 Respostas 3

1

Você pode utilizar Callbacks para personalizar um evento.

Para não repetir linhas de código, criamos uma função:

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);
}

Adicione na folha de estilo:

.ativo {
    border: 1px solid red;
}

Crie a instancia do plugin

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,
});

Exemplo

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>
<script src="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>

Obs.: As vezes ao executar o código na primeira página buga, pois coloca o seletor por classe no primeiro e quarto item. Creio que seja um bug do próprio plugin.

Referência

2
  • Obrigada! Vou tentar! 12/02/2018 às 12:17
  • 1
    Precisando é só comentar!
    – NoobSaibot
    12/02/2018 às 13:58
0

SEU CÓDIGO

Dentre suas regras CSS, essa é a única correta.

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

POSSÍVEL PROBLEMA

Se ela não tiver dado certo em seu projeto, talvez, você está referenciando o Owl na ordem errada. Veja como seria o certo:

<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>

Como o exemplo acima mostra, os arquivos do carousel devem ser chamados antes de qualquer outra folha de estilo que você fez. Isso, por causa da cascata CSS.

CONCLUSÃO

Utilize o seguinte código CSS:

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

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

E esse 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>

Se o problema persistir

Use a keyword !important, assim:

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

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

Isso irá forçar o navegador utilizar essas propriedades.

LINKS ÚTEIS

Aqui está alguns links para estudar sobre especificidade CSS:

Também tem links para estudar sobre seletores CSS:

Agora, links a respeito do !important:

1
  • A ordem dos css estao assim tambem...Nem pelo inspecionador de elementos funciona... 12/02/2018 às 12:16
0

O CSS não possui seletor para pegar elementos de forma dinâmica ou o primeiro ou último elemento baseado na classe.

A pseudo-classe :first-child não pega o primeiro elemento que possui a classe, ela seleciona o primeiro elemento-filho do elemento-pai do seletor, (pareceu confuso? Veja esta resposta).

Já o jQuery e o JS puro conseguem selecionar esses elementos baseados na classe.

Exemplo em 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>
<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>

Exemplo em JavaScript puro:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .