Changer les boutons de flèche dans le curseur Slick
je veux changer les flèches de mon slider slick mais ça ne change pas. Je veux le bouton Suivant et précédent comme une image. J'ai essayé de mettre dans un <style>
mais ça ne fonctionne toujours pas. Où puis-je modifier le réglage des flèches?
slick thème css @charset "UTF-8";
// Default Variables
$slick-font-path: "./fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "./" !default;
$slick-arrow-color: white !default;
$slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "←" !default;
$slick-next-character: "→" !default;
$slick-dot-character: "•" !default;
$slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;
@function slick-image-url($url) {
@if function-exists(image-url) {
@return image-url($url);
}
@else {
@return url($slick-loader-path + $url);
}
}
@function slick-font-url($url) {
@if function-exists(font-url) {
@return font-url($url);
}
@else {
@return url($slick-font-path + $url);
}
}
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
position: absolute;
margin: 0 auto;
}
/* Icons */
@if $slick-font-family == "slick" {
@font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 30px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
margin-top: -10px;
padding: 0;
border: none;
outline: none;
&:hover, &:focus {
outline: none;
background: transparent;
color: transparent;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&.slick-disabled:before {
opacity: $slick-opacity-not-active;
}
}
.slick-prev:before, .slick-next:before {
font-family: $slick-font-family;
font-size: 20px;
line-height: 1;
color: $slick-arrow-color;
opacity: $slick-opacity-default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
[dir="rtl"] & {
left: auto;
right: -25px;
}
&:before {
content: $slick-prev-character;
[dir="rtl"] & {
content: $slick-next-character;
}
}
}
.slick-next {
right: -25px;
[dir="rtl"] & {
left: -25px;
right: auto;
}
&:before {
content: $slick-next-character;
[dir="rtl"] & {
content: $slick-prev-character;
}
}
}
/* Dots */
.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -45px;
list-style: none;
display: block;
text-align: center;
padding: 0;
width: 100%;
li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
&:hover, &:focus {
outline: none;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
content: $slick-dot-character;
width: 20px;
height: 20px;
font-family: $slick-font-family;
font-size: $slick-dot-size;
line-height: 20px;
text-align: center;
color: $slick-dot-color;
opacity: $slick-opacity-not-active;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
&.slick-active button:before {
color: $slick-dot-color-active;
opacity: $slick-opacity-default;
}
}
}
slick css
/* Slider */
.slick-slider {
position: relative;
margin: 0 auto;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0 auto;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
aperçu du site
9 réponses
Slick a un moyen très facile de personnaliser ses boutons à travers deux variables dans sa propre configuration: prevArrow
et nextArrow
.
les deux types sont: string (HTML / jQuery selector) / object( DOM node / jQuery object), donc dans votre slider paramètres vous pouvez définir les classes:
prevArrow: $('.prev')
nextArrow: $('.next')
et ajoutez à ces éléments les styles que vous voulez.
Par exemple:
//HTML
<div class="slider-box _clearfix">
<div class="slick-slider">
<div>
<img src="img/home_carousel/home_carorusel_1.jpg">
</div>
<div>
<img src="img/home_carousel/home_carorusel_2.jpg">
</div>
<div>
<img src="img/home_carousel/home_carorusel_3.jpg">
</div>
<div>
<img src="img/home_carousel/home_carorusel_4.jpg">
</div>
</div>
</div>
<div class="paginator-center text-color text-center">
<h6>VER MAS LANZAMIENTOS</h6>
<ul>
<li class="prev"></li>
<li class="next"></li>
</ul>
</div>
//JS
$(document).ready(function () {
$('.slick-slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
prevArrow: $('.prev'),
nextArrow: $('.next'),
});
//CSS
.paginator{
position: relative;
float: right;
margin-bottom: 20px;
li{
margin-top: 20px;
position: relative;
float: left;
margin-right: 20px;
&.prev{
display: block;
height: 20px;
width: 20px;
background: url('../img/back.png') no-repeat;
}
&.next{
display: block;
height: 20px;
width: 20px;
background: url('../img/next.png') no-repeat;
}
}
}
Vous pouvez facilement créer votre propre style de flèche avec l' .slick-next:before
et .slick-prev:after
pseudo-classes.
Voici un exemple:
.slick-prev:after {
content: ">";
color: red;
font-size: 30px;
}
.slick-next:before {
content: "<";
color: red;
font-size: 30px;
}
Cela a fonctionné pour moi:
http://codepen.io/anon/pen/qNbWwK
Masquer les boutons par défaut dans CSS et utiliser:
<!-- In HTML: -->
<p class="left">left</p>
<p class="right">right</p>
/* In the JS file */
$('.slider').slick({
arrows: false
})
$('.left').click(function(){
$('.slider').slick('slickPrev');
})
$('.right').click(function(){
$('.slider').slick('slickNext');
})
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>"
});
});
Si vous utilisez sass, vous pouvez simplement définir les variables mentionnées ci-dessous,
$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.
les autres variables sass qui peuvent être configurées sont données dans Slick GitHub page
Vous pouvez utiliser les valeurs "content" de FontAwesome et les appliquer comme suit par css. Ceux-ci appliquent "chevron droite/gauche" icônes.
.custom-slick .slick-prev:before {
content: "";
font-family: 'FontAwesome';
font-size: 22px;
}
.custom-slick .slick-next:before {
content: "";
font-family: 'FontAwesome';
font-size: 22px;
}
propriété du contenu de pseudo element: avant accepte aussi les images. En slick-thème.css modifier:
// change
$slick-prev-character: "←" !default;
// to
$slick-prev-character: url('image-prev.png');
// and
$slick-next-character: "→" !default;
// to
$slick-next-character: url('image-next.jpg');
ou directement modifier la propriété content sur slick-prev: before et slick-next: before
.slick-prev {
left: -25px;
[dir="rtl"] & {
left: auto;
right: -25px;
}
&:before {
content: url('image-prev.jpg'); // <<<<<<<<
[dir="rtl"] & {
content: url('image-next.jpg'); // <<<<<<<<
}
}
}
.slick-next {
right: -25px;
[dir="rtl"] & {
left: -25px;
right: auto;
}
&:before {
content: url('image-next.jpg'); // <<<<<<<<
[dir="rtl"] & {
content: url('image-prev.jpg'); // <<<<<<<<
}
}
}
<div class="prev">Prev</div>
<div class="next">Next</div>
$('.your_class').slick({
infinite: true,
speed: 300,
slidesToShow: 5,
slidesToScroll: 5,
arrows: true,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
dans votre script.js fichier, vous pouvez ajouter quelque chose comme ça.
jQuery(document).ready(function(){
$('.slick-prev').html('something');
$('.slick-next').html('something')
});