Javascript 更改 Slick 滑块中的箭头按钮

Question

提问by Jennifer

I want to change the arrows in my slick slider but it does not change. I want the next and previous button as an image. I have tried putting it in a <style>but it still not working. Where can I change the arrows setting?

我想更改光滑滑块中的箭头，但它没有改变。我想要下一个和上一个按钮作为图像。我试过把它放在 a 中，<style>但它仍然无法正常工作。在哪里可以更改箭头设置？

slick theme css@charset "UTF-8";

光滑的主题 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

光滑的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

回答by Yoan

Slick has a very easy way to customize its buttons through two variables in its own configuration: prevArrowand nextArrow.

Slick 有一种非常简单的方法可以通过其自己的配置中的两个变量来自定义其按钮：prevArrow和nextArrow.

Both types are: string (html | jQuery selector) | object (DOM node | jQuery object), so in your settings slick slider you can set the classes:

两种类型都是： string (html | jQuery 选择器) | 对象（DOM 节点 | jQuery 对象），因此在您的设置光滑滑块中，您可以设置类：

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

and add to these elements the styles you want.

并将您想要的样式添加到这些元素中。

For example:

例如：

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

回答by Asaf David

You can easily create your own style of arrow with the .slick-next:beforeand the .slick-prev:afterpseudo-classes.

您可以使用.slick-next:before和.slick-prev:after伪类轻松创建自己的箭头样式。

Here's an example:

下面是一个例子：

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

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

Answer 3

回答by user7259624

This worked for me:

这对我有用：

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

Hide the default buttons in CSS and use:

隐藏 CSS 中的默认按钮并使用：

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

回答by Chamon Roy

its very easy. Use the bellow code, Its works for me. Here I have used fontawesome icon but you can use anything as image or any other Icon's code.

它很容易。使用下面的代码，它对我有用。在这里，我使用了 fontawesome 图标，但您可以使用任何东西作为图像或任何其他图标的代码。

    $(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>"
        });
    });

Answer 5

回答by par

If you are using sass you can simply set below mentioned variables,

如果您使用的是 sass，您可以简单地设置下面提到的变量，

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

These will change the font family used by slick's theme css and also the unicode for prev and next button.

这些将更改 slick 主题 css 使用的字体系列以及上一个和下一个按钮的 unicode。

Other sass variables which can be configured are given in Slick Github page

其他可以配置的 sass 变量在Slick Github 页面中给出

Answer 6

回答by NikiRocco

You can use FontAwesome "content" values and apply as follow by css. These apply "chevron right/left" icons.

您可以使用 FontAwesome“内容”值并按以下方式应用 css。这些应用“V 形右/左”图标。

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

回答by Adam Colton

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

Answer 8

回答by Jeff Schwarting

Easy solution:

简单的解决方案：

$('.slick-slider').slick({      
    arrows: true,
    prevArrow:"<img class='a-left control-c prev slick-prev' src='YOUR LEFT ARROW IMAGE URL'>",
    nextArrow:"<img class='a-right control-c next slick-next' src='YOUR RIGHT ARROW IMAGE URL'>"
});

Image URLs can be local or cdn-type stuff (web icons, etc.).

图像 URL 可以是本地或 cdn 类型的内容（网络图标等）。

Example CSS (adjust as needed here, this is just an example of what's possible):

示例 CSS（根据需要在此处进行调整，这只是可能的示例）：

.control-c {
    width: 30px;
    height: 30px;
}

This worked well for me!

这对我来说效果很好！

Answer 9

回答by Inka Pelin

Content property of pseudo element :before accepts images too. In slick-theme.css change:

伪元素的内容属性 :before 也接受图像。在 slick-theme.css 更改：

// 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');

or directly change the content property on slick-prev:before and slick-next:before

或直接更改 slick-prev:before 和 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'); // <<<<<<<<
        }
    }
}

Answer 10

回答by jamesdlivesinatree

For changing the color

用于改变颜色

.slick-prev:before {
  color: some-color!important;
}
.slick-next:before {
  color: some-color!important;
}

Javascript 更改 Slick 滑块中的箭头按钮

提问by Jennifer

回答by Yoan

回答by Asaf David

回答by user7259624

回答by Chamon Roy

回答by par

回答by NikiRocco

回答by Adam Colton

回答by Jeff Schwarting

回答by Inka Pelin

回答by jamesdlivesinatree

相关推荐

最近更新

标签

Javascript 更改 Slick 滑块中的箭头按钮

提问by Jennifer

回答by Yoan

回答by Asaf David

回答by user7259624

回答by Chamon Roy

回答by par

回答by NikiRocco

回答by Adam Colton

回答by Jeff Schwarting

回答by Inka Pelin

回答by jamesdlivesinatree

相关推荐

如何在 Javascript 中以 hh:mm AM/PM 格式获取当前时间？

Javascript Nodemon - 在安装过程中“干净退出 - 在重新启动之前等待更改”

Javascript jQuery 中的 console.log 是什么？

Javascript Angular/Material 中的样式 mat-form-field 输入

相关推荐

最近更新

标签