web-dev-qa-db-fra.com

Ajouter des boutons personnalisés sur Slick Carousel

Comment appliquer les boutons personnalisés prev et next au carrousel glissant? J'ai essayé une image de fond sur les classes css .slick-prev et .slick-next. J'ai également essayé d'ajouter une nouvelle classe conformément à la documentation, mais les flèches ont complètement disparu:

<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>

Tous les pointeurs seraient appréciés.

javascriptcssslick.js
22
rorykoehler

Je sais que c’est une vieille question, mais je peux peut-être aider quelque chose, car cela m’a aussi étonné jusqu’à ce que je lise un peu plus la documentation:

chaîne prevArrow (sélecteur html | jQuery) | objet (nœud DOM | objet jQuery ) Précédent Vous permet de sélectionner un nœud ou de personnaliser le code HTML pour "Précédent" flèche.

chaîne nextArrow (sélecteur html | jQuery) | objet (noeud DOM | jQuery objet) Suivant Autorise vous pouvez sélectionner un nœud ou personnaliser le code HTML pour la flèche "Suivant".

c'est comme ça que j'ai changé mes boutons .. a fonctionné parfaitement.

  $('.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'>"
  });
69
tallgirltaadaa

À partir de la documentation

prevArrow/nextArrow

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

Quelques exemples 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')
    });
});

Un petit mot sur le style

Une fois que Slick aura entendu parler de vos nouveaux boutons, vous pourrez les personnaliser à votre guise. En examinant l'exemple ci-dessus, vous pouvez les cibler en fonction de class name, id name ou même element.

Quelqu'un a dit JSFiddle?

10
Kenneth Stoddard

si vous souhaitez utiliser des icônes de n'importe quelle bibliothèque de polices, vous pouvez essayer cette option en appelant le curseur de 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" provient de la bibliothèque de polices d'icônes FontAwesome.

10
Xuwel Khan

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"; }
6
Yes Barry

Pourquoi ne pouvez-vous pas utiliser les classes CSS par défaut et ajouter votre style?

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

et

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

Êtes-vous utilisé une propriété simple background css?

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

Vous pouvez aussi utiliser Font Awesome. N'oubliez pas les pseudo-éléments CSS.

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

3
Aivaras Čenkus

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

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

Celles-ci changeront la famille de polices utilisée par le thème CSS de slick, ainsi que l'unicode des boutons prev et next. Cet exemple utilisera les icônes FontAwesome en chevron à gauche et en chevron à droite.

D'autres variables sass pouvant être configurées sont données dans page Slick Github

2
par

c'est très facile. Utilisez le code ci-dessous, ça marche pour moi. Ici, j'ai utilisé fontawesome icon mais vous pouvez utiliser n'importe quoi comme image ou le code de tout autre 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>"
    });
});
1
Chamon Roy

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

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

C'est parce qu'ils utilisent une police icon pour les boutons. Ils utilisent la police "Slick" comme vous pouvez le voir dans cette image:

enter image description here

Fondamentalement, cela fait de la lettre "A" la forme d'une icône, la lettre "B" de la forme d'une autre et ainsi de suite.

Par exemple:

enter image description here

Si vous voulez en savoir plus sur les polices d'icônes cliquez ici

Si vous souhaitez modifier les icônes, vous devez remplacer le code du bouton complet ou vous pouvez aller sur www.fontastic.me et créer votre propre police Après cela, remplacez le fichier de police pour le fichier actuel et vous aurez votre propre icône.

1
mrpinkman

Une variation de la réponse de @tallgirltaadaa, dessinez votre propre bouton en forme 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");

puis ajoutez le css

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