Estoy tratando de apuntar a la active slide en mi slick carousel por ken wheeler para agregar una animación del elemento p dentro de esa diapositiva.

Así, cuando el slide está activo, el p elemento de rebote (o algo), entonces cuando las transiciones de las diapositivas a la siguiente diapositiva, la animación será aplicado para el nuevo elemento p. Después de las diapositivas tienen en bucle, la película de animación de la clase se aplica continuamente a la slick carousel.

HTML:

<div class="slick-promo">
    <div class="single-slide">[img code here]<p>This text will come in animated, then as the slide leaves it will have the animation class removed.</p></div>
    <div class="single-slide">[img code here]<p>Lorem ipsum blah blah</p></div>
    <div class="single-slide">[img code here]<p>lorem ipsum blah blah</p></div>
</div>

La images y varios classes dinámicamente generados por otros programas que uso.

Javascript:

jQuery(document).ready(function($){
    $('.slick-promo').slick({
      infinite: true,
      fade: true,
      cssEase: 'linear',
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      //this is where I need help
      onAfterChange:function(slider,index){
            $('.slick-active p').toggleClass('animated bounce');
      }
    });
});

La .slick-active clase se genera de forma dinámica por el slick carousel. Yo soy la orientación de la p elemento en el código HTML anterior. El animated bounce clases están ligados a css que generar la animación.

Soy muy nuevo en Javascript/jQuery, así que mi error podría ser primaria. He buscado en la web por muchas horas, ahora tratando de averiguar lo que tengo que hacer…

  • Creo que me di cuenta que la mayoría de esto, excepto por un par de detalles más finos, que son ajenos a la pregunta original.
InformationsquelleAutor jtsama | 2015-04-09

1 Comentario

  1. 5

    El problema estaba en cómo las clases se agregan o eliminan durante el afterChange y beforeChange eventos proporcionados por la mancha de carrusel.

    Javascript:

    $('.slick-promo').on('afterChange', function(event, slick, currentSlide){
        $('.slick-active p').removeClass('hidden');
        $('.slick-active p').addClass('animated bounce');
    });
    
    $('.slick-promo').on('beforeChange', function(event, slick, currentSlide){
        $('.slick-active p').removeClass('animated bounce');
        $('.slick-active p').addClass('hidden');
    });

    Haciendo esto, yo era capaz de agregar .clase ocultos a mi p elementos en el html. Ahora me he dirigido con éxito mis elementos cuando las diapositivas se cambió dentro y fuera, lo que hace que para una animación más suave.

    Por favor, tenga en cuenta que esto causó la primera diapositiva tiene un error de carga. Mi solución es que la clase ocultos no en la primera diapositiva…

Dejar respuesta

Please enter your comment!
Please enter your name here