Estoy trabajando con slick slider.

¿Alguien sabe cómo agregar una clase a la ‘slick-activo’ slider?

Estoy mostrando 3 diapositivas y me gustaría tener una clase diferente en cada uno de ellos: una clase para la izquierda de la diapositiva, otro para el centro y otro para la diapositiva de la derecha.

Por ejemplo, para el activo de la izquierda de la diapositiva: ‘slick-activo-izquierda».

Slick slider - Agregar la clase a 'slick-activo'

  • mostrar el código para reproducir el problema, gracias
  • añadido. Gracias
InformationsquelleAutor patie | 2017-05-23

3 Comentarios

  1. 3

    Simple, sólo tiene que utilizar de hermanos Adyacentes selectores (+) .slick-active para el 1er partido, .slick-active + .slick-active para el 2do partido, .slick-active + .slick-active + .slick-active para la 3ª:

    .slick-active {
      background: red;
    }
    
    .slick-active + .slick-active {
      background: blue;
    }
    
    .slick-active + .slick-active + .slick-active {
      background: yellow;
    }

    De hermanos adyacentes selectores

    former_element + target_element { propiedades de estilo }

    Esto se conoce como un selector adyacente o el siguiente selector de hermanos. Se selecciona sólo el elemento especificado que sigue inmediatamente a la ex elemento especificado.

    REF: https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

    JS:

    $('.slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        infinite: true,
        cssEase: 'linear'
    });

    CSS:

    .slider {
        width: 650px;
        margin: 0 auto;
    }
    
    img {
        width: 150px;
        height: 150px;
    }
    
    .slick-active {
      background: red;
    }
    
    .slick-active + .slick-active {
      background: blue;
    }
    
    .slick-active + .slick-active + .slick-active {
      background: yellow;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    
    <div class="slider">
      <div>
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div>
        <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
      </div>
      <div>
        <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
      </div>
      <div>
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div>
        <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
      </div>
      <div>
        <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
      </div>
    </div>

  2. 0

    Lugar de agregar una clase a cada control deslizante, puede dirigirse a ellos ya con CSS.Utilice el selector de hijo de apuntar a la izquierda de la diapositiva, nth-child(1), el centro de la diapositiva, nth-child(2) y la última diapositiva, nth-child(3). Aquí está el CSS:

    .slick-active: nth-child (1) {
    /* Your CSS here */
    }

    Actualización como la solución CSS no se soluciona el problema ya que las diapositivas de la clase se añaden a través de JS. Usted puede usar jQuery para orientar la diapositiva. Sólo asegúrese de que las cargas después de que el archivo JS.

    <script>
    jQuery('.slick-active:nth-child(1)').addClass('first-slide');
    </script>
    • Ya lo he intentado, pero la adición de la «mancha de activos» con JS, por lo que el enésimo hijo no funciona…
  3. 0

    Creo que el mejor modo nativo para lograr su objetivo debe ser algo como esto:

    $('#your-slider-element').slick({/configuration-object/}).on('beforeChange', function(event, slick, currentSlide, nextSlide){
     $(this).find('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('customClass');
     $(this).find('.slick-slide[data-slick-index="'+currentSlide+'"]').removeClass('customClass');
    });

    No olvides retirar tu clase personalizada antes de mudarse a nueva diapositiva!
    Referencia: http://kenwheeler.github.io/slick/ – búsqueda de beforeChange

Dejar respuesta

Please enter your comment!
Please enter your name here