logo标签列表

自定义箭头react-slick

carouselslick.jsreact-slick
9

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

谢谢你的帮助！

12个回答
24
我倾向于禁用箭头并自己构建它们。 创建一个参考。
const slider = React.useRef(null);

连接到滑块

<Slider ref={slider} {...settings}>
在任何想要放置的位置添加您的按钮。

在任何想要放置的位置添加您的按钮

<button onClick={() => slider?.current?.slickPrev()}>Prev</button>
<button onClick={() => slider?.current?.slickNext()}>Next</button>
2
太厉害了！这立刻帮了我。 - RafaelEchart
我已经尝试过这个，但是没有起作用。 - Lokesh thakur
15
我遇到了同样的问题，并一直尝试通过查看此CustomArrows文档和其他建议来寻找解决方案，但没有一个能满足我想要的（使用不同的箭头图标并将箭头显示在幻灯片上方）。然后我尝试按照此previousNextMethods文档进行调整。

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

样式表.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

14

参见官方文档 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>
    );
  }
}
1
由于某些原因，第一个示例对我不起作用 - 当通过配置传递时，元素根本没有呈现，我要尝试第二个示例。 返回翻译后的文本：由于某些原因，第一个示例对我不起作用 - 当通过配置传递时，元素根本没有呈现，我要尝试第二个示例。 - llamerr
2
最初的回答：你可以尝试这种方法。
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'未定义 no-undef - Varinder Sohal
这是一个CSS模块使用示例。如果您没有使用CSS模块，可以提供类名字符串。 - Yasin UYSAL
0

请记得为您的按钮添加 onClick 属性：

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

如果有人想要达到相同的效果，可以通过一些CSS来实现：

.slick-next {
  right: 25px; 
}
0

这个例子将默认箭头替换为另一个图标

import Slider from "react-slick";
import './Example2.css'
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import { FaBeer } from 'react-icons/fa'

function SampleNextArrow(props: any) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      onClick={onClick}
    ><FaBeer style={{ ...style, color: "red", fontSize: "30px" }} /></div>
  );
}

function SamplePrevArrow(props: any) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      onClick={onClick}
    ><FaBeer style={{ ...style, color: "red", fontSize: "30px" }} /></div>
  );
}

const Example2 = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />
  };

  return (
    <div className="wrapper">
      <h1>example 2</h1>
      <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> 
  );
}
 
export default Example2;

以及 CSS

.slick-arrow.slick-next:before {
  content: "";
}

.slick-arrow.slick-prev:before {
  content: "";
}
0
    import React from 'react';
import Slider from 'react-slick';
import prevArrow from './prev-arrow.svg';
import nextArrow from './next-arrow.svg';

const SliderCarousel = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow: <CustomPrevArrow />,
    nextArrow: <CustomNextArrow />
  };

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

const CustomPrevArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, width: '50px', height: '50px', backgroundImage: `url(${prevArrow})`}}
      onClick={onClick}
    />
  );
}

const CustomNextArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, width: '50px', height: '50px', backgroundImage: `url(${nextArrow})`}}
      onClick={onClick}
    />
  );
}

export default SliderCarousel;

你可以这样做

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
0

我从上面Oleg的答案开始，并稍微修改了一下，使用FontAwesome图标。这种方法很好地避免了将额外属性发送到FontAwesome组件中导致错误，例如“React在DOM元素上不识别currentSlide属性”。感谢Oleg提供的模式。

import React from 'react';
import Slider from 'react-slick';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const SomeComponent: React.FC = (): JSX.Element => {

  const NextArrow = (props: any) => {
    const { className, style, onClick } = props;
    return (
      <div
        className={className}
        style={{ ...style, display: 'block' }}
        onClick={onClick}
      >
        <FontAwesomeIcon icon="fa-solid fa-chevron-right" />
      </div>
    );
  };

  const PrevArrow = (props: any) => {
    const { className, style, onClick } = props;
    return (
      <div
        className={className}
        style={{ ...style, display: 'block' }}
        onClick={onClick}
      >
        <FontAwesomeIcon icon="fa-solid fa-chevron-left" />
      </div>
    );
  };

  const settings = {
    // other settings here ...
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    // more settings here ...
  };

  return (
    <Slider {...settings}>
      {/* inner stuff here */}
    </Slider>
  );
};
0

您可以构建自己的箭头，正如大家上面指出的那样，在文档中有提到。

但是如果您想更改图像（这往往是情况），那么我所做的就是为滑块添加了2行代码.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");
    }
   }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接