logo标签列表

自定义箭头react-slick

carouselslick.jsreact-slick
9

我正在使用react-slick在我的项目中创建一个轮播图。我已经阅读了文档并尝试了不同的方法，但找不到完全按照我的需求进行自定义的方法...有人知道是否有一种方法可以让nextArrow显示在/在图像的前面而不是在其右侧吗？请参见下面的图像以获取所需的结果：image

谢谢你的帮助！

12个回答
0
import React, { Component } from "react";
import Slider from "react-slick";

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "green" }}
      onClick={onClick}
    />
  );
}

export default class CustomArrows extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />
    };
    return (
      <div>
        <h2>Custom Arrows</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

在这里查看React-slick自定义的下一个和上一个按钮：https://react-slick.neostack.com/docs/example/custom-arrows

0

添加自定义 CSS 样式

.slick-next {
  background: url('./images/next.png') center center no-repeat!important;

  &::before {
    display: none;
  }
}

.slick-prev {
  background: url('./images/back.png') center center no-repeat!important;

  &::before {
    display: none;
  }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接