Ajouter des boutons personnalisés sur Slick Carousel

si vous voulez utiliser des icônes de n'importe quelle bibliothèque de police d'icône, vous pouvez l'essayer dans l'option tout en appelant le curseur dans votre fichier 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>'

ici " fa " vient de FontAwesome icon font library.

Dans la doc

prevArrow / nextArrow

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

un exemple de code

$(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')
    });
});

une petite note sur le style

une fois que Slick connaît vos nouveaux boutons, vous pouvez les adapter au contenu de votre cœur; en regardant l'exemple ci-dessus, vous pouvez les cibler en fonction de class nom id nom de ou même element.

quelqu'un a-t-il dit JSFiddle?

si vous utilisez Bootstrap 3, vous pouvez utiliser les 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"; }

pourquoi vous ne pouvez pas utiliser les classes CSS par défaut et Ajouter un peu de votre style?

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

et

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

avez-vous utilisé de simples background propriété css?

dans l'exemple: http://jsfiddle.net/BNvke/1/

Vous pouvez utiliser Police Génial trop. N'oubliez pas les pseudo-éléments CSS.

et n'oubliez pas jQuery, vous pouvez remplacer des éléments, ajouter des classes, etc.

Si vous utilisez sass, vous pouvez simplement définir les variables mentionnées ci-dessous pour utiliser des icônes fournies par d'autres polices,

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

ceux-ci vont changer la famille de police utilisée par le thème CSS de slick et aussi l'unicode pour prev et Prochain bouton. Cet exemple utilisera les icônes chevron-gauche et chevron-droite de FontAwesome.

les autres variables sass qui peuvent être configurées sont données dans Slick GitHub page

C'est parce qu'ils utilisent un icône de la police pour les boutons. Ils utilisent la police" Slick " comme vous pouvez le voir dans cette image:

en gros, la lettre "A" devient la forme d'une icône, la lettre "B" la forme d'une autre et ainsi de suite.

Par exemple:

Si vous souhaitez en savoir plus sur l'icône polices cliquez ici

Si vous vous voulez changer les icônes, vous devez remplacer le code de bouton entier ou vous pouvez aller à www.fontastic.me et créer votre propre police d'icône. Après cela, remplacer le fichier de police pour l'actuel et vous aurez votre propre icône.

Cela a fonctionné pour moi, quand beaucoup de ces autres éléments n'ont pas:

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

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

puis ajouter le css

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

c'est très facile. Utilisez le code bellow, ça marche pour moi. Ici j'ai utilisé l'icône de fontawesome mais vous pouvez utiliser n'importe quoi Comme image ou n'importe quel autre code D'icône.

$(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>"
    });
});