如何创建具有更宽中心元素的轮播？

Question

我需要按照设计结构构建一个轮播：

我尝试了多个库：react-slick、owl-slider、brainhubeu 的 react-carousel 和 tiny-slider。它们似乎都是为固定宽度的卡片/滑块设计的。一旦我更改当前活动滑块的尺寸，它的位置就会丢失。

你在任何地方见过类似的东西吗？欢迎任何示例或想法（最好是 React.js 解决方案）。

Answer 1

使用猫头鹰轮播插件。你可以很容易地使用它，它有使用 npm 安装的说明。创建滑块后，只需为具有 active 类的 owl-item 提供您想要的样式。我已经为您创建了主要的 css 和 HTML 结构。只需将所需的依赖项添加到您的反应项目并使用它。$('.owl-carousel').owlCarousel({&nbsp; &nbsp; loop:true,&nbsp; &nbsp; margin:10,&nbsp; &nbsp; autoWidth:true,&nbsp; &nbsp; center:true,&nbsp; &nbsp; nav: false,&nbsp; &nbsp; autoplay: true,&nbsp; &nbsp; autoplayTimeout: 3000,&nbsp; &nbsp; autoplayHoverPause: true,&nbsp; &nbsp; responsiveClass:true,&nbsp; &nbsp; responsive:{&nbsp; &nbsp; &nbsp; &nbsp; 0:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; 600:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:4&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; 1000:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:5&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }})body{&nbsp; direction: ltr}.owl-carousel .owl-stage{&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: flex-end;}.owl-carousel .owl-item .item{&nbsp; width: 120px;&nbsp; min-height: 120px;&nbsp; background-color: lightblue;}.owl-carousel .owl-item.active.center .item {&nbsp; width: 160px;&nbsp; height: 200px;&nbsp; background-color: pink;}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /><link&nbsp; rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" /><style>.owl-theme .owl-dots .owl-dot span {&nbsp; background: #fff;&nbsp; border: 1px solid #a5a5a5;}.owl-theme .owl-dots .owl-dot.active span,&nbsp;.owl-theme .owl-dots .owl-dot:hover span {&nbsp; background: #a5a5a5;}</style><div class="owl-carousel owl-theme">&nbsp; &nbsp; <div class="item"><h4>1</h4></div>&nbsp; &nbsp; <div class="item"><h4>2</h4></div>&nbsp; &nbsp; <div class="item"><h4>3</h4></div>&nbsp; &nbsp; <div class="item"><h4>4</h4></div>&nbsp; &nbsp; <div class="item"><h4>5</h4></div>&nbsp; &nbsp; <div class="item"><h4>6</h4></div>&nbsp; &nbsp; <div class="item"><h4>7</h4></div>&nbsp; &nbsp; <div class="item"><h4>8</h4></div>&nbsp; &nbsp; <div class="item"><h4>9</h4></div>&nbsp; &nbsp; <div class="item"><h4>10</h4></div>&nbsp; &nbsp; <div class="item"><h4>11</h4></div>&nbsp; &nbsp; <div class="item"><h4>12</h4></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Answer 2

用光滑的https://codepen.io/ealigam/pen/yEzQPP查看这个例子我可以通过稍微调整使其看起来与您描述的非常相似$('.slider').slick({&nbsp; centerMode: true,&nbsp; slidesToShow: 3,&nbsp; centerPadding: "15%",&nbsp; speed: 500});