我正在使用react-slick 在我的项目中创建一个轮播。 我已经阅读了文档并尝试了不同的方法,但找不到一种方法来完全按照我需要的方式自定义它...有谁知道是否有办法让 nextArrow 显示在图像前面/前面而不是显示在图像上这是正确的? 请参阅下图以获得所需的结果:
感谢您的帮助!
我倾向于禁用箭头并自己构建它们。
创建参考
const slider = React.useRef(null);
连接到滑块
<Slider ref={slider} {...settings}>
在任意位置添加按钮
<button onClick={() => slider?.current?.slickPrev()}>Prev</button>
<button onClick={() => slider?.current?.slickNext()}>Next</button>
我遇到了同样的问题,并一直尝试按照此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;
}
我希望这会有所帮助。 代码沙盒
查看官方文档 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>
);
}
}
你可以试试这个方法
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>
)
}
如果有人尝试达到相同的结果,可以使用一些 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 自定义下一个和上一个按钮: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;
}
}
您可以构建自己的箭头,就像上面每个人指出的那样,在他们的文档中提到了这一点。
但是如果你想更改图像(大多数情况都是这样),那么我所做的只是为滑块添加 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");
}
}
请记住,需要将 onClick 属性添加到您的按钮中:
const SlickArrow = ({onClick}: props) => (
<button onClick={onClick}><Icon.Arrow /></button>
);
此示例用另一个图标替换默认箭头
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: "";
}
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;
你可以这样做
很多人用不同的方法回答这个问题。我也想出了我的。这是我的方法,仅使用一个组件,我们将生成两侧的下一个和上一个箭头,并为它们提供适当的样式。
LiveScoreArrowsComponent.jsx
import React from 'react'
import PropTypes from 'prop-types'
LiveScoreSliderArrow.propTypes = {
className : PropTypes.string,
onClick : PropTypes.func,
style : PropTypes.object,
}
function LiveScoreSliderArrow(props) {
const {className, style, onClick} = props;
let arrow_direction = className.search("slick-prev") != -1 ? "left" : "right";
let class_by_direction = {
left: className.replace("slick-prev", ""),
right: className.replace("slick-next", "")
}
let hide_flag_class = className.search("slick-disabled") != -1 ? " d-none" : ""
return (
<button style={{...style, top: "unset", lineHeight: "normal"}} className={class_by_direction[arrow_direction] + hide_flag_class + ` p-1 shadow border text-black rounded ri-arrow-${arrow_direction}-s-line ${arrow_direction}`} onClick={onClick}></button>
)
}
export default LiveScoreSliderArrow
SlickSlider设置
const SETTINGS = {
slidesToShow: 3,
infinite: false,
swipeToSlide: true,
slidesToScroll: 3,
variableWidth: true,
arrows: true,
nextArrow: <LiveScoreSliderArrow />,
prevArrow: <LiveScoreSliderArrow />,
}
首先确保将react-slick Slider 包装到其他自定义滑块组件中
import React from 'react'
import Slider from 'react-slick'
import PropTypes from 'prop-types'
import Card from '../livescore/card'
LiveScoreSlider.propTypes = {
data: PropTypes.array.isRequired,
settings: PropTypes.object.isRequired
}
function LiveScoreSlider({data, settings}) {
return (
<Slider className="col-sm-12 d-flex align-items-center livescore-scorecard-container" {...settings}>
{
data.map((livescore, index)=>{
// console.log(livescore)
return <Card
key={index}
team1={livescore.teams[0]}
team2={livescore.teams[1]}
match={livescore.match}
stadium={livescore.stadium}
series={livescore.series}
/>
})
}
</Slider>
)
}
export default LiveScoreSlider
我从上面 Oleg 的答案开始,并对其进行了一些更改以使用 FontAwesome 图标。此方法可以很好地防止额外的属性被发送到 FontAwesome 组件,从而导致错误,例如“React 无法识别 DOM 元素上的
currentSlide
属性”。感谢奥列格提供的图案。
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>
);
};