自定义箭头反应流畅 [英] Custom Arrows react-slick

问题描述

我正在使用react-slick在项目中创建轮播。
我已经阅读了文档并尝试了不同的方法，但是找不到一种完全按照我需要的方式自定义它的方法。有人知道是否有一种方法可以在/前面显示nextArrow。形象，而不是对的？
请参见下面的图片以获取所需的结果：
图片

I am using react-slick to create a carousel in my project. I've read through the documents and tried different things but could not find a way to customize it exactly the way I need... Does anyone knows if there a way to have the nextArrow show on/in front of the image and not on its right? See image below for desired result: image

感谢您的帮助！

推荐答案

我遇到了同样的问题，一直尝试通过遵循 CustomArrows文档来搜索解决方案，并其他一些建议，但没有一个像我想要的那样工作（对箭头使用不同的图标，并在幻灯片顶部显示箭头）。然后，我尝试遵循 previousNextMethods文档，并尝试

I faced the same problem and have been trying to search for the solutions by following this CustomArrows documentation and some other suggestions but none of them working as what I wanted to (use different icons for the arrow and display the arrow on top of the slides). Then I tried to follow this previousNextMethods documentation, and try to adjust it from there.

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

我希望这会有所帮助。 代码沙盒

I hope this will help. codesandbox

这篇关于自定义箭头反应流畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！