reactjs React Multi Carousel中的幻灯片动画

我想在react中创建自己的多滑块，但我不知道我是否有正确的方法，因为似乎不可能添加动画。我的方法：如果我有一个项目数组，并希望同时显示3个项目，我使用两个指针'end'和'start'。当我按下一个或上一个按钮，我增加或减少两个指针。在处理完增量后，我使用slice（start，end）来显示部分。在render中，我遍历了结果数组和显示项。我还注意到了溢出，所以当start大于end指针时，我合并合并了两个slice（）数组。简而言之，我Map了一个“活动”项数组并显示它们。我的问题是如何添加动画。我希望每次单击后项目偏移一。
返回方法

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

你可以添加动画幻灯片使用translate和setInterval或setInterval你喜欢！

reactjs React Multi Carousel中的幻灯片动画

1条答案

相关问题

热门标签

最新问答