自定义箭头反应光滑答案

【问题标题】：Custom Arrows react-slick自定义箭头反应光滑
【发布时间】：2018-08-07 16:46:30
【问题描述】：

我正在使用 react-slick 在我的项目中创建一个轮播。我已经阅读了文档并尝试了不同的方法，但找不到完全按照我需要的方式自定义它的方法......有谁知道是否有办法让 nextArrow 显示在图像上/前面而不是这是正确的？有关所需结果，请参见下图： image

感谢您的帮助！

【问题讨论】：

标签： carousel slick.js react-slick

【解决方案1】：

我遇到了同样的问题，并一直在尝试通过遵循 CustomArrows documentation 和其他一些建议来寻找解决方案，但它们都没有像我想要的那样工作（使用不同的箭头图标并在顶部显示箭头幻灯片）。然后我尝试关注这个previousNextMethods documentation，并尝试从那里进行调整。

index.js

    renderArrows = () => {
    return (
      <div className="slider-arrow">
        <ButtonBase
          className="arrow-btn prev"
          onClick={() => this.slider.slickPrev()}
        >
          <ArrowLeft />
        </ButtonBase>
        <ButtonBase
          className="arrow-btn next"
          onClick={() => this.slider.slickNext()}
        >
          <ArrowRight />
        </ButtonBase>
      </div>
    );
  };
  render() {
    return (
      <div className="App">
        <div style={{ position: "relative", marginTop: "2rem" }}>
          {this.renderArrows()}
          <Slider
            ref={c => (this.slider = c)}
            dots={true}
            arrows={false}
            centerMode={true}
            slidesToShow={2}
          >
            <div>
              <img src="http://placekitten.com/g/400/200" alt="cat" />
            </div>
            <div>
              <img src="http://placekitten.com/400/200" alt="cat" />
            </div>
            <div>
              <img src="http://placekitten.com/g/400/200" alt="cat" />
            </div>
            <div>
              <img src="http://placekitten.com/400/200" alt="cat" />
            </div>
          </Slider>
        </div>
      </div>
    );
  }

style.css

.App {
font-family: sans-serif;
}

.slider-arrow {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.arrow-btn {
  top: 45%;
}
.next {
  float: right;
}

我希望这会有所帮助。 codesandbox

【讨论】：

【解决方案2】：

查看官方文档 https://react-slick.neostack.com/docs/example/custom-arrows/ https://react-slick.neostack.com/docs/example/previous-next-methods 来自那里的代码：

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

或

import React, { Component } from "react";
import Slider from "react-slick";

export default class PreviousNextMethods extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }
  next() {
    this.slider.slickNext();
  }
  previous() {
    this.slider.slickPrev();
  }
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2>Previous and Next methods</h2>
        <Slider ref={c => (this.slider = c)} {...settings}>
          <div key={1}>
            <h3>1</h3>
          </div>
          <div key={2}>
            <h3>2</h3>
          </div>
          <div key={3}>
            <h3>3</h3>
          </div>
          <div key={4}>
            <h3>4</h3>
          </div>
          <div key={5}>
            <h3>5</h3>
          </div>
          <div key={6}>
            <h3>6</h3>
          </div>
        </Slider>
        <div style={{ textAlign: "center" }}>
          <button className="button" onClick={this.previous}>
            Previous
          </button>
          <button className="button" onClick={this.next}>
            Next
          </button>
        </div>
      </div>
    );
  }
}

【讨论】：

由于某种原因，第一个示例对我不起作用 - 通过配置时根本没有呈现元素，尝试第二个

【解决方案3】：

我倾向于禁用箭头并自己构建它们。

创建参考

const slider = React.useRef(null);

附加到滑块

<Slider ref={slider} {...settings}>

在任意位置添加按钮

<button onClick={() => slider?.current?.slickPrev()}>Prev</button>
<button onClick={() => slider?.current?.slickNext()}>Next</button>

【讨论】：

【解决方案4】：

你可以试试这个方法

render() {
    const ArrowLeft = (props) => (
        <button
            {...props}
            className={'prev'}/>
    );
    const ArrowRight = (props) => (
        <button
            {...props}
            className={'next'}/>
    );

    const settings = {
        arrows: true,
        prevArrow: <ArrowLeft />,
        nextArrow: <ArrowRight />,
    };

    return (
        <Slider {...settings}>
            {/* items... */}
        </Slider>
    )
}

【讨论】：

's' is not defined no-undef
这是一个 css 模块使用示例。如果你不使用 css 模块，你可以给出类名字符串。 @VarinderSohal

【解决方案5】：

如果有人试图达到相同的结果，那么可以使用一些 css：

.slick-next {
  right: 25px; 
}

【讨论】：

【解决方案6】：

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 Custom Next & Prev 按钮：https://react-slick.neostack.com/docs/example/custom-arrows

【讨论】：

【解决方案7】：

添加自定义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;
  }
}

【讨论】：

【解决方案8】：

您可以构建自己的箭头，就像上面每个人都指出的那样，他们的文档中提到了它。

但是，如果您想更改图像（大多数情况下都是这样），那么我所做的只是为滑块 .slick-next:before & .slick-prev:before 添加了两行代码，并用图像替换了内容。有了这个，您不需要处理禁用最后一项上的箭头（这是默认设置）。使用下面的代码只是改变你的箭头，其余的行为保持不变。

查看下面的代码

.some_class .slick-slider {
    button.slick-next:before {
        content: url("your_image_here.svg");
    }
    button.slick-prev:before {
        content: url("your_image_here.svg");
    }
   }

【讨论】：

【解决方案9】：

请记住，需要将 onClick 属性添加到您的按钮：

const SlickArrow = ({onClick}: props) => (
  <button onClick={onClick}><Icon.Arrow /></button>
);

【讨论】：