反应多轮播每张幻灯片只显示一个元素
react multi carousel only showing one element per slide
我正在使用 React 多轮播库来显示一些 div。代码似乎在理论上有效,如下所示:
import * as React from "react";
import "../styles/Home.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 3000 },
items: 5
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 5
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 5
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 5
}
};
const IndicatorCarousel = () => {
return (
<div className="IndicatorCarousel">
<div className="IndicatorCarouselText">
Select your preferred stock indicators
</div>
<br></br>
<Carousel
swipeable={false}
draggable={false}
showDots={true}
responsive={responsive}
ssr={true} // means to render carousel on server-side.
infinite={true}
autoPlaySpeed={1000}
keyBoardControl={true}
customTransition="all .5"
transitionDuration={500}
containerClass="carousel-container"
removeArrowOnDeviceType={["tablet", "mobile"]}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
>
<div className="IndicatorCarouselCard">
Test
</div>
<div className="IndicatorCarouselCard">
Test2
</div>
<div className="IndicatorCarouselCard">
test3
</div>
<div className="IndicatorCarouselCard">
test4
</div>
<div className="IndicatorCarouselCard">
test5
</div>
</Carousel>
</div>
);
};
export default IndicatorCarousel;
但是,当我在浏览器中呈现轮播时,它只显示三个部分,每个部分都有一个单数 div,并且可以使用点和箭头进行导航。相反,我想同时显示所有三个部分并使用箭头沿着旋转木马移动。
有人看到我的代码有问题吗?
告诉我。
现状:
尝试将 Carousel 组件上的 centerMode
属性 设置为 true
。
<Carousel
...
centerMode={true}
...
>
或者您可以尝试将 partialVisible
设置为 true
我正在使用 React 多轮播库来显示一些 div。代码似乎在理论上有效,如下所示:
import * as React from "react";
import "../styles/Home.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 3000 },
items: 5
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 5
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 5
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 5
}
};
const IndicatorCarousel = () => {
return (
<div className="IndicatorCarousel">
<div className="IndicatorCarouselText">
Select your preferred stock indicators
</div>
<br></br>
<Carousel
swipeable={false}
draggable={false}
showDots={true}
responsive={responsive}
ssr={true} // means to render carousel on server-side.
infinite={true}
autoPlaySpeed={1000}
keyBoardControl={true}
customTransition="all .5"
transitionDuration={500}
containerClass="carousel-container"
removeArrowOnDeviceType={["tablet", "mobile"]}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
>
<div className="IndicatorCarouselCard">
Test
</div>
<div className="IndicatorCarouselCard">
Test2
</div>
<div className="IndicatorCarouselCard">
test3
</div>
<div className="IndicatorCarouselCard">
test4
</div>
<div className="IndicatorCarouselCard">
test5
</div>
</Carousel>
</div>
);
};
export default IndicatorCarousel;
但是,当我在浏览器中呈现轮播时,它只显示三个部分,每个部分都有一个单数 div,并且可以使用点和箭头进行导航。相反,我想同时显示所有三个部分并使用箭头沿着旋转木马移动。
有人看到我的代码有问题吗?
告诉我。
现状:
尝试将 Carousel 组件上的 centerMode
属性 设置为 true
。
<Carousel
...
centerMode={true}
...
>
或者您可以尝试将 partialVisible
设置为 true