[英]How to show on the carousel a piece of the previous and next slide?
I'm beginner in ReactJS and I would like to render the slides of my carousel showing a piece of the previous slide and also of the next slide, what I need to do is like this in the example below:我是 ReactJS 的初学者,我想渲染我的轮播幻灯片,显示上一张幻灯片和下一张幻灯片,我需要做的是在下面的示例中是这样的:
I am currently using the react-elastic-carousel
library, but I am not attached to it, any library that works in ReactJS I am willing to use.我目前正在使用react-elastic-carousel
库,但我不依赖它,任何在 ReactJS 中工作的库我都愿意使用。 Currently in my code, the slide is showing 100% of the space.目前在我的代码中,幻灯片显示了 100% 的空间。
Here's my code I put into codesandbox.io :这是我放入codesandbox.io的代码:
import React from "react"; import "./styles.css"; import Carousel from "react-elastic-carousel"; export default function App() { return ( <div className="App"> <Carousel itemsToShow={1} initialActiveIndex={3}> <div className="div">1</div> <div className="div">2</div> <div className="div">3</div> <div className="div">4</div> <div className="div">5</div> <div className="div">6</div> <div className="div">7</div> </Carousel> </div> ); }
Thank you in advance for the help预先感谢您的帮助
I was able to show some of the previous and next slides by changing the overflow on the slider-container:通过更改滑块容器上的溢出,我能够显示一些上一张和下一张幻灯片:
.rec.rec-slider-container {
overflow: visible;
}
I would also put overflow-x: hidden;
我也会把overflow-x: hidden;
on your body so that it doesn't scroll left and right.在你的身体上,这样它就不会左右滚动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.