改变Slick滑块中的箭头按钮

Question

改变Slick滑块中的箭头按钮

91

我想要更改slick轮播中的箭头，但是没有生效。我希望将下一个和上一个按钮设置为图像。我已经尝试将其放入<style>中，但仍然无效。在哪里可以更改箭头的设置？

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

流畅的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;
    }
}

站点预览

- Jennifer

请您能否检查一下正确答案？谢谢。 - Yoan

17个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Inka Pelin · Answer 1

伪元素的content属性也可以接受图片。在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');

或者直接在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'); // <<<<<<<<
        }
    }
}

- nh-labs · Answer 2

这是另一个更改箭头并使用自己的箭头图像的示例。

.slick-prev:before {
    background-image: url('images/arrow-left.png');
    background-size: 50px 50px;
    display: inline-block;
    width: 50px; 
    height: 50px;
    content:"";
}
.slick-next:before {
    background-image: url('images/arrow-right.png');
    background-size: 50px 50px;
    display: inline-block;
    width: 50px; 
    height: 50px;
    content:"";
}

- Apocilyptica · Answer 3

这是我关于如何将React的Slick Carousel箭头更改为任何你想要的内容的示例。首先，你需要在设置中将nextArrow和prevArrow设置为一个函数，然后在该函数中返回一个div，其中包含你想使用的任何图标。我使用了Font Awesome。然后，在NextArrow和PrevArrow函数中添加一个className到你的图标中。接下来添加scss代码以自定义任何你想要的内容。

JSX代码：

function NextArrow(props) {
  const { style, onClick } = props;
  return (
    <div style={{ ...style, display: "block" }} onClick={onClick}>
      <FontAwesomeIcon icon={faChevronRight} size="3x" className="slick-arrow-icon-right" />
    </div>
  );
}

function PrevArrow(props) {
  const { style, onClick } = props;
  return (
    <div style={{ ...style, display: "block" }} onClick={onClick}>
      <FontAwesomeIcon icon={faChevronLeft} size="3x" className="slick-arrow-icon-left" />
    </div>
  );
}

function SlickCarouselArrowChange(props) {
  var settings = {
    className: "slider variable-width",
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: true,
    autoplay: true,
    autoplaySpeed: 2000,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
  };

  return (
    <div className="slick-slider">
      <Slider {...settings}>
        {props.searchResults.map((image, index) => (
          <div key={index}>
            <img src={image.urls.small} />{" "}
          </div>
        ))}
      </Slider>
    </div>
  );
}

SCSS代码：

.slick-arrow-icon-left,
.slick-arrow-icon-right {
  position: absolute;
  display: block;
  cursor: pointer;
  background: transparent;
  color: black;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
  transition: 0.5s ease-in-out;
  &:hover,
  &:focus {
    outline: none;
    background: transparent;
    color: black;
    font-size: 40px;
    &::before {
      opacity: 1;
    }
  }
}

.slick-arrow-icon-left {
  left: -50px;
  [dir="rtl"] & {
    left: auto;
    right: -50px;
  }
}

.slick-arrow-icon-right {
  right: -50px;
  [dir="rtl"] & {
    left: -50px;
    right: auto;
  }
}

示例链接：

https://slick-carousel-arrow-change.herokuapp.com/

源代码：

https://github.com/Apocilyptica/slick-carousel-arrow-change

- William · Answer 4

这是一个使用JavaScript的替代方案：

：

document.querySelector('.slick-prev').innerHTML = '<img src="path/to/chevron-left-image.svg">'>;
document.querySelector('.slick-next').innerHTML = '<img src="path/to/chevron-right-image.svg">'>;

将图像更改为文本或您所需的任何内容。

- Bhavin Thummar · Answer 5

如果我们想要使用 Font Awesome 库来使用 CSS，那么我们可以使用以下 CSS。

  .slick-prev:before {
    content: "\f104";
    color: red;
    font-size: 30px;
    font-family: 'FontAwesome';
  }

  .slick-next:before {
    content: "\f105";
    color: red;
    font-size: 30px;
    font-family: 'FontAwesome';
  }

页面中必须添加Font Awesome库的CSS。

- jamesdlivesinatree · Answer 6

更改颜色

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

- Naveen Kashyap · Answer 7

0

如果你正在使用react-slick，你可以尝试在自定义的next和prev div上使用这个。

https://react-slick.neostack.com/docs/example/previous-next-methods

- Naveen Kashyap

1

来自评论：嗨，虽然链接是共享知识的好方法，但如果它们在将来失效，它们实际上不会回答问题。在你的回答中添加回答问题的链接的基本内容。如果内容过于复杂或太大而无法放在此处，请描述所提议的解决方案的一般思路。请记住，始终保留原始解决方案网站的链接引用。参见：如何撰写一个好回答？ - sɐunıɔןɐqɐp