我想在反应中创建我自己的多滑块,但我不知道我是否有正确的方法,因为似乎不可能添加动画。 我的方法:如果我有一个项目数组并且想要同时显示 3 个项目,我使用两个指针“结束”和“开始”。当我按下下一个或上一个按钮时,我会增加或减少两个指针。 处理增量后,我使用 slice(start,end) 来显示该部分。在渲染中,我遍历结果数组并显示项目。我还处理了溢出问题,因此当开始大于结束指针时,我组合了两个 slice() 数组。 简而言之,我映射一系列“活动”项目并显示它们。我的问题是如何添加动画。我希望每次点击后项目都会偏移一。
退货方式
return (
<div className="carusel-container">
<button onClick={handlePrev}>
Prev
</button>
<div className="carusel-items-container">
{visibleItems.map((item) => (
<div
key={item.id}
className={`carusel-item`}
>
<img className={'image'} src={item.imgSrc} alt={`Item ${item.id}`} />
</div>
))}
</div>
<button onClick={handleNext}>
Next
</button>
</div>
);
};
export default CustomCarousel;
如果您喜欢,我可以分享我自己的滑块!
//sliderContainer
import React from 'react';
import './sixth.css';
import moaz from '../../images/moaz.svg';
import wassem from '../../images/wassem.svg';
import yasser from '../../images/yasser.svg';
import ahmad from '../../images/ahmad.svg';
import ImageSlider from './ImageSlider';
const Sixth = () => {
const slider = [
{srcIm:`${yasser}`,name:`name`,title:`title`,job:`job`},
{srcIm:`${moaz}`,name:`name`,title:`title`,job:`job`},
{srcIm:`${ahmad}`,name:`name`,title:`title`,job:`job`},
{srcIm:`${wassem}`,name:`name`,title:`title`,job:`job`},
]
return (
<div className='sixth_main'>
<div className='sixth_container'>
<div className='sixth_h1'>
<p className='sixth_para'>bla bla bla</p>
<p className='sixth_para'>bla bla bla</p>
</div>
<div className=''>
<ImageSlider slider={slider}/>
</div>
</div>
</div>
)
}
export default Sixth;
幻灯片
//the slides
import React, { useState } from 'react'
import {BiSolidChevronRightCircle} from 'react-icons/bi';
import {BiSolidChevronLeftCircle} from 'react-icons/bi';
const ImageSlider = ({slider}) => {
const [ currentIndex,setCurrentIndex ] = useState(0);
const goFor = () => {
const isLastSlide = currentIndex === slider.length - 1;
const newIndex = isLastSlide ? 0 : currentIndex + 1;
setCurrentIndex(newIndex);
}
const goPrev = () => {
const isFirstSlide = currentIndex === 0;
const newIndex = isFirstSlide ? slider.length - 1 : currentIndex - 1;
setCurrentIndex(newIndex);
}
return (
<div className='ImageSlider_main'>
<div className='slide'
// style={{background:`url(${slider[currentIndex].srcIm})`}}
>
<img className='ImageSlider_img' src={slider[currentIndex].srcIm} alt=''/>
<div className='slide_content'>
<p className='name'>{slider[currentIndex].name}</p>
<p className='job'>{slider[currentIndex].job}</p>
<p className='title'>{slider[currentIndex].title}</p>
</div>
<div className='toggler'>
<div style={{cursor:'pointer'}} onClick={goPrev}>.
<BiSolidChevronLeftCircle size={25}/></div>
<div className='indecis' style={{backgroundColor:currentIndex === 0 &&'rgb(20, 138, 117)'}} onClick={() => setCurrentIndex(0)}></div>
<div className='indecis' style={{backgroundColor:currentIndex === 1 &&'rgb(20, 138, 117)'}} onClick={() => setCurrentIndex(1)}></div>
<div className='indecis' style={{backgroundColor:currentIndex === 2 &&'rgb(20, 138, 117)'}} onClick={() => setCurrentIndex(2)}></div>
<div className='indecis' style={{backgroundColor:currentIndex === 3 &&'rgb(20, 138, 117)'}} onClick={() => setCurrentIndex(3)}></div>
<div style={{cursor:'pointer'}} onClick={goFor}><BiSolidChevronRightCircle size={25}/></div>
</div>
</div>
</div>
)
}
export default ImageSlider
CSS
.sixth_main{
width:100%;
min-height: 50vh;
background-color: rgb(20, 138, 117);
display: flex;
justify-content: center;
align-items: center;
padding-top: 50px;
padding-bottom: 50px;
}
.sixth_container{
display: flex;
flex-direction: column;
}
.sixth_h1{
font-size: 36px;
font-weight: bold;
color:rgb(48,48,48);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sixth_para{
width: fit-content;
text-align: center;
color: rgb(230,230,230);
}
.ImageSlider_main{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.slide{
display: flex;
flex-direction: column;
align-items: center;
}
.slide_content{
width:450px;
height: 200px;
border-radius: 50px;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.name{
color:rgb(48,48,48);
font-size: 18px;
font-weight: bold;
}
.job{
color:rgb(105,105,105);
font-size: 11px;
margin-top: 10px;
}
.title{
margin-top: 20px;
color:rgb(100,100,100);
font-size: 12px;
width:80%;
text-align: center;
}
.ImageSlider_img{
width:100px;
height: 100px;
border-radius: 50%;
border: dashed 1px white;
margin-bottom: -40px;
z-index: 1;
}
.toggler{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
width:150px;
}
.indecis{
width:10px;
height: 10px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
border:solid 2px white;
cursor: pointer;
}
@media screen and (max-width:710px) {
.sixth_h1{
font-size: 30px;
}
.name{
font-size: 16px;
}
}
@media screen and (max-width:600px) {
.sixth_h1{
font-size: 26px;
}
.ImageSlider_img{
width:60px;
height: 60px;
margin-bottom: -20px;
}
.name{
font-size: 14px;
}
.slide_content{
width:350px;
height: 150px;
border-radius: 30px;
}
.indecis{
width:8px;
height: 8px;
}
}
@media screen and (max-width:425px) {
.sixth_h1{
font-size: 18px;
}
.sixth_main{
height: fit-content;
padding-top: 70px;
padding-bottom: 70px;
}
.sixth_container{
align-items: center;
justify-content: center;
}
.name{
font-size: 12px;
}
.job{
font-size: 8px;
}
.title{
font-size: 9px;
}
.slide_content{
width:250px;
height: 120px;
border-radius: 20px;
}
.ImageSlider_img{
margin-bottom: -10px;
}
.indecis{
width:6px;
height: 6px;
border:solid 1px white;
}
}