javascript - vertical - slick theme

Añadir botones personalizados en Slick Carousel

Question

¿Cómo aplico los botones personalizados anterior y siguiente al carrusel pulido? He intentado una imagen de fondo en las .slick-prev y .slick-next css. También he intentado agregar una nueva clase según la documentación pero las flechas desaparecieron por completo:

<script type="text/javascript">
$(''.big-image'').slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true,
  nextArrow: ''.next_caro'',
  prevArrow: ''.previous_caro''
});
</script>

Cualquier indicador sería apreciada.

Answer 1

¿Por qué no puedes usar las clases de CSS por defecto y agregar algo a tu estilo?

.slick-next {
  /*my style*/
  background: url(my-image.png);
}

y

.slick-prev {
  /*my style*/
  background: url(my-image.png);
}

¿Se utiliza la propiedad css de fondo simple?

en el ejemplo: http://jsfiddle.net/BNvke/1/

Puedes usar Font Awesome también. No te olvides de los pseudo elementos CSS.

Y no olvide jQuery, puede reemplazar elementos, agregar clases, etc.

Answer 2

Eso es porque usan una fuente de icono para los botones. Usan la fuente "Slick" como se puede ver en esta imagen:

Básicamente, hacen que la letra "A" sea la forma de un icono, la letra "B" la forma de otro y así sucesivamente.

Por ejemplo:

Si quieres saber más sobre las fuentes de iconos haz clic aquí.

Si desea cambiar los íconos, debe reemplazar todo el código del botón o puede ir a www.fontastic.me y crear su propia fuente de íconos. Después de eso, reemplaza el archivo de fuente por el actual y tendrás tu propio ícono.

Answer 3

Esto me funcionó cuando muchos de estos otros artículos no:

.slick-prev:before {
  content: url(''your-arrow.png'');
}
.slick-next:before {
  content: url(''your-arrow.png'');
}

Answer 4

Sé que esta es una pregunta antigua, pero tal vez pueda ser de ayuda para alguien, porque esto también me dejó perplejo hasta que leí la documentación un poco más:

prevArrow cadena (html | jQuery selector) | objeto (DOM nodo | objeto jQuery) Anterior Le permite seleccionar un nodo o personalizar el HTML para la flecha "Anterior".

cadena siguiente (html | jQuery selector) | objeto (nodo DOM | objeto jQuery) Siguiente Le permite seleccionar un nodo o personalizar el HTML para la flecha "Siguiente".

Así es como cambié mis botones ... funcionó perfectamente.

  $(''.carousel-content'').slick({
      prevArrow:"<img class=''a-left control-c prev slick-prev'' src=''../images/shoe_story/arrow-left.png''>",
      nextArrow:"<img class=''a-right control-c next slick-next'' src=''../images/shoe_story/arrow-right.png''>"
  });

Answer 5

Si desea utilizar iconos de cualquier biblioteca de fuentes de iconos, puede probar esto en la opción mientras llama al control deslizante en su archivo js.

prevArrow: ''<div class="class-to-style"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></div>'',

nextArrow: ''<div class="class-to-style"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></div>''

Aquí "fa" proviene de la biblioteca de fuentes FontAwesome.

Answer 6

Si está utilizando Sass, simplemente puede configurar las variables mencionadas a continuación para usar los íconos provistos por otras fuentes,

$slick-font-family:FontAwesome;
$slick-prev-character: "/f053";
$slick-next-character: "/f054";

Estos cambiarán la familia de fuentes utilizada por el tema de slick''s css y también el código Unicode para los botones prev y next. Este ejemplo utilizará los iconos chevron-left y chevron-right de FontAwesome.

Otras variables sass que pueden configurarse se dan en la página de Slick Github

Answer 7

Si estás usando Bootstrap 3, puedes usar los Glyphicons.

.slick-prev:before, .slick-next:before {
    font-family: "Glyphicons Halflings", "slick", sans-serif;
    font-size: 40px;
}

.slick-prev:before { content: "/e257"; }
.slick-next:before { content: "/e258"; }

Answer 8

Una variación en la respuesta de @tallgirltaadaa, dibuja tu propio botón en forma de caret:

var a = $(''.MyCarouselContainer'').slick({
    prevArrow: ''<canvas class="prevArrowCanvas a-left control-c prev slick-prev" width="15" height="50"></canvas>'',
    nextArrow: ''<canvas class="nextArrowCanvas a-right control-c next slick-next" width="15" height="50"></canvas>''
});

function drawNextPreviousArrows(strokeColor) {
    var c = $(".prevArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(15, 0);
    ctx.lineTo(0, 25);
    ctx.lineTo(15, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
    var c = $(".nextArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(0, 0);
    ctx.lineTo(15, 25);
    ctx.lineTo(0, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}
drawNextPreviousArrows("#cccccc");

a continuación, agregue el css

.slick-prev, .slick-next 
    height: 50px;s
}

Answer 9

es muy fácil. Usa el código de abajo, funciona para mí. Aquí he usado fontawesome icon pero puedes usar cualquier cosa como imagen o cualquier otro código de Icon.

$(document).ready(function(){
    $(''.slider'').slick({
        autoplay:true,
        arrows: true,
        prevArrow:"<button type=''button'' class=''slick-prev pull-left''><i class=''fa fa-angle-left'' aria-hidden=''true''></i></button>",
        nextArrow:"<button type=''button'' class=''slick-next pull-right''><i class=''fa fa-angle-right'' aria-hidden=''true''></i></button>"
    });
});

Answer 10

De los docs

prevArrow / nextArrow

Tipo: string (html|jQuery selector) | object (DOM node|jQuery object) string (html|jQuery selector) | object (DOM node|jQuery object)

Algún código de ejemplo

$(document).ready(function(){
    $(''.slick-carousel-1'').slick({
        // @type {string} html
        nextArrow: ''<button class="any-class-name-you-want-next">Next</button>'',
        prevArrow: ''<button class="any-class-name-you-want-previous">Previous</button>''
    });

    $(''.slick-carousel-2'').slick({
        // @type {string} jQuery Selector
        nextArrow: ''.next'',
        prevArrow: ''.previous''
    });

    $(''.slick-carousel-3'').slick({
        // @type {object} DOM node
        nextArrow: document.getElementById(''slick-next''),
        prevArrow: document.getElementById(''slick-previous'')
    });

    $(''.slick-carousel-4'').slick({
        // @type {object} jQuery Object
        nextArrow: $(''.example-4 .next''),
        prevArrow: $(''.example-4 .previous'')
    });
});

Una pequeña nota sobre el estilo.

Una vez que Slick sepa acerca de tus nuevos botones, puedes personalizarlos según el contenido de tu corazón; Si observa el ejemplo anterior, puede orientarlos en función del nombre de class , el nombre de id o incluso el element .

¿Alguien dijo JSFiddle?