Я использую react-slick для создания карусели в своем проекте. Я прочитал документы и попробовал разные вещи, но не смог найти способ настроить его именно так, как мне нужно... Кто-нибудь знает, есть ли способ показать nextArrow на/перед изображением, а не на это верно? См. изображение ниже для желаемого результата: image
Спасибо за вашу помощь!
См. официальную документацию 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>
);
}
}
OR
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>
);
}
}
Я столкнулся с той же проблемой и пытался найти решения, следуя этому 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>
);
}
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
Я обычно отключаю стрелки и строю их сам.
Создать ссылку
const slider = React.useRef(null);
Прикрепить к слайдеру
<Slider ref={slider} {...settings}>
Добавляйте свои кнопки везде, где хотите
<button onClick={() => slider?.current?.slickPrev()}>Prev</button>
<button onClick={() => slider?.current?.slickNext()}>Next</button>
Если кто-то попытается добиться того же результата, способ сделать это с помощью некоторого css:
.slick-next {
right: 25px;
}
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 Next и Prev здесь: https://react-slick.neostack.com/docs/example/custom-arrows
Добавить пользовательский стиль 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;
}
}
Вы можете попробовать этот способ
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>
)
}
