Thay đổi các nút mũi tên trong thanh trượt Slick

Question

Tôi muốn thay đổi các mũi tên trong thanh trượt slick của tôi nhưng nó không thay đổi. Tôi muốn nút tiếp theo và trước đó là hình ảnh. Tôi đã thử đặt nó trong một <style> nhưng nó vẫn không hoạt động. Tôi có thể thay đổi cài đặt mũi tên ở đâu?

chủ đề slick 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; 
     } 
    } 
} 

trơn 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 có một cách rất dễ dàng tùy chỉnh các nút của mình thông qua hai biến trong cấu hình riêng của mình: prevArrow và nextArrow.

Cả hai loại là: string (html | jQuery selector) | đối tượng (nút DOM | đối tượng jQuery), vì vậy trong cài đặt trượt thanh trượt, bạn có thể đặt các lớp:

và thêm vào các yếu tố này theo kiểu bạn muốn.

Ví dụ:

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

Bạn có thể dễ dàng tạo ra phong cách riêng của bạn của mũi tên với .slick-next:before và .slick-prev:after pseudo-class.

Dưới đây là một ví dụ:

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

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

Answer 3

Trong script.js bạn nộp bạn có thể thêm một cái gì đó như thế này.

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

Answer 4

này đã làm việc cho tôi:

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

Ẩn nút mặc định trong CSS và sử dụng:

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

Bạn có thể sử dụng FontAwesome "nội dung" giá trị và áp dụng như sau bởi css. Các biểu tượng này áp dụng các biểu tượng "chevron right/left".

.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

Nếu bạn đang sử dụng sass bạn chỉ có thể thiết lập dưới đây đề cập biến,

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

Những điều này sẽ thay đổi họ phông chữ được sử dụng bởi trơn của theme css và cũng là unicode cho trước và nút bên cạnh.

biến sass khác mà có thể được cấu hình được đưa ra trong Slick Github page

Answer 7

của nó rất dễ dàng. Sử dụng mã dưới đây, công trình của nó cho tôi. Ở đây tôi đã sử dụng biểu tượng fontawesome nhưng bạn có thể sử dụng bất cứ thứ gì làm hình ảnh hoặc bất kỳ mã nào khác của 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>" 
     }); 
    });