标签: react-multi-carousel

这是我的轮播，我正在使用react-multi-carousel和Nextjs，并且我正在激活 ssr 选项

import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'

import CarouselImage from './CarouselImage'

const responsive = {
    desktop: {
        breakpoint: { max: 4000, min: 1024 },
        items: 1,
        paritialVisibilityGutter: 60,
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 1,
        paritialVisibilityGutter: 50,
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
        paritialVisibilityGutter: 30,
    },
}

const imageFolders = [
    '/images/carousel/post-1',
    '/images/carousel/post-2',
]

export default function CarouselComponent() {
    return (
        <div>
            <div>
                <div>
                    <Carousel
                        ssr
                        infinite={true} …

我正在从州政府获取数据。现在我想使用react-multi-carousel制作一个轮播滑块

我正在尝试为具有来自 API 的数据的新闻卡组件实现https://www.npmjs.com/package/react-multi-carousel 。到目前为止我的代码如下，但是轮播似乎没有实现？

子组件

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css'

    const responsive = {
        superLargeDesktop: {
          breakpoint: { max: 4000, min: 3000 },
          items: 5
        },
        desktop: {
          breakpoint: { max: 3000, min: 1024 },
          items: 3
        },
        tablet: {
          breakpoint: { max: 1024, min: 464 },
          items: 2
        },
        mobile: {
          breakpoint: { max: 464, min: 0 },
          items: 1
        }
    };
    const size = 15;
    const Itemlist = props.data.slice(0, size).map((item,id) => {
        return(
            <div …

我正在使用“react-multi-carousel”模块来显示多个项目。一切都很顺利，但它会自动运行。我不想让它自动播放。

我已将道具“autoPlay”设置为“false”，如下所示。但轮播焦点从第一张幻灯片转移到最后一张幻灯片。重要的是，当我首先单击箭头（下一步）按钮时，就会发生此问题。

我的代码：

    <Carousel
      additionalTransfrom={0}
      arrows
      autoPlay={false}
      autoPlaySpeed={3000}
      centerMode={false}
      className=""
      containerClass="container-with-dots"
      dotListClass=""
      draggable
      focusOnSelect={false}
      infinite
      itemClass=""
      keyBoardControl
      minimumTouchDrag={80}
      renderButtonGroupOutside={false}
      renderDotsOutside={false}
      responsive={{
        desktop: {
          breakpoint: {
            max: 3000,
            min: 1024
          },
          items: 3,
          partialVisibilityGutter: 40
        },
        mobile: {
          breakpoint: {
            max: 464,
            min: 0
          },
          items: 1,
          partialVisibilityGutter: 30
        },
        tablet: {
          breakpoint: {
            max: 1024,
            min: 464
          },
          items: 2,
          partialVisibilityGutter: 30
        }
      }}
      showDots={false}
      sliderClass=""
      slidesToSlide={1}
      swipeable
    >
                <div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 1</div>
                <div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', …