Zmiana przycisków strzałek w suwaku Slick

Question

Chcę zmienić strzałki w moim płynnym suwaku, ale to się nie zmieni. Chcę mieć następny i poprzedni przycisk jako obraz. Próbowałem umieścić go w <style>, ale nadal nie działa. Gdzie mogę zmienić ustawienie strzałek?

slick temat css @ zestaw "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; 
     } 
    } 
} 

zręczny 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; 
    } 
} 

preview of the site

Answer 1

Slick ma bardzo łatwy sposób dostosować swoje przyciski przez dwie zmienne w swojej własnej konfiguracji: prevArrow i nextArrow.

Oba typy to: string (html | jQuery selector) | obiekt (węzeł DOM | obiekt jQuery), więc w ustawieniach śliskiego suwaka można ustawić klas:

prevArrow: $('.prev') 
nextArrow: $('.next') 

i dodać do tych elementów stylów chcesz.

Na przykład:

//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;; 
    } 
    } 
} 

Answer 2

Możesz łatwo stworzyć swój własny styl strzałki z .slick-next:before i pseudoklas .slick-prev:after.

Oto przykład:

.slick-prev:after { 
    content: ">"; 
    color: red; 
    font-size: 30px; 
} 

.slick-next:before { 
    content: "<"; 
    color: red; 
    font-size: 30px; 
} 

Answer 3

W swoim script.js plik można dodać coś takiego.

jQuery(document).ready(function(){ 
     $('.slick-prev').html('something'); 
     $('.slick-next').html('something') 
}); 

Answer 4

Ten pracował dla mnie:

http://codepen.io/anon/pen/qNbWwK

ukryć przyciski domyślne w CSS i zastosowanie:

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

Answer 5

Można wykorzystać FontAwesome wartości "content" i stosuje się następująco przez css. Obejmują one ikony "prawo/lewo".

.custom-slick .slick-prev:before { 
    content: ""; 
    font-family: 'FontAwesome'; 
    font-size: 22px; 
} 
.custom-slick .slick-next:before { 
    content: ""; 
    font-family: 'FontAwesome'; 
    font-size: 22px; 
} 

Answer 6

Jeśli używasz Sass można po prostu ustawić niżej wymienioną zmienne,

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

To zmieni czcionkę używaną przez rodzinę motywu css zręczny i również Unicode prev i następnego przycisku.

Inne zmienne Sass, które mogą być skonfigurowane są podane w Slick Github page

Answer 7

jej bardzo proste. Użyj kodu poniżej, to działa dla mnie. Tutaj użyłem fontawesome icon, ale możesz użyć czegokolwiek jako obrazu lub innego kodu 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>" 
     }); 
    });