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.
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'>"
});
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
.
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.
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 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.
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
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>"
});
});
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');
}
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:
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:
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.
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
}