5

Possuo um carousel onde os botões prev e next são gerados pelo plugin.

O problema é mesmo tentando adicionar uma classe com o método tradicional $(".owl-prev").addClass("theme-color"); o mesmo não se aplica pois a div ainda não foi gerada.

Usando a função on também não funcionou:

$("#owl-main-banner").on("load", function(){
    $(".owl-prev").addClass("theme-color");
});
1
  • O plugin não tem um callback quando o deploy fôr feito? Qual é o plugin?
    – Sergio
    28/04/2015 às 16:03

2 Respostas 2

1

Tu pode usar o método $.done do jQuery. Quando o plugin for gerado ai sim você chama o seu addClass().

Exemplo:

var dfd = $.Deferred();
dfd.done( [ fn1, fn2 ], fn3, [ fn2, fn1 ] )

Onde fn's são funções.

Estas serão executadas em ordem de adição.

Nota:

Se o .done() não funcionar, tente $.when().

1

Pela classe utilizada no trecho do seu código, suponho que você esteja utilizando o plugin Owl Carousel, eu também o utilizo. Isso que você está tentando fazer pode facilmente ser alcançado o callback afterInit do próprio plugin.

Você vai querer dar uma olhada na documentação do Owl Carousel especialmente na seção 2 - Callbacks

Vou deixar aqui a solução, mas preparei um demo pra você ver o resultado.

CSS

/* Custom class for the nav - Classe customizada para navegação */
.theme-color {
  color: #fff;
  background: #3ABC4B !important;
  opacity: 1 !important;
}

JS

$(document).ready(function () {

// Inicializa o plugin e define algumas variáveis de customização
$(".owl-carousel").owlCarousel({
  navigation: true,
  navigationText : false,
  navigationText : ["<",">"], 
  pagination:  false, // Esconde a navegação com "dots"
  afterInit : attachEvent // Após a inicialização, inclui um novo evento
});
// Com essa função abaixo encontramos o elemento pela classe e adicionamos
// a classe customizada, poderia ser qualquer outra função que você
// decidisse criar, bastaria chamar essa função na variável 
// `afterInit :` quando fosse inicializar o plugin
function attachEvent(elem){
 elem.parent().find('.owl-prev').addClass('theme-color')
 };

});

demo

Espero que consiga atingir o resultado esperado, boa sorte!

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 .