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

Question

我需要按照设计结构构建一个轮播：我尝试了多个库：react-slick、owl-slider、brainhubeu 的 react-carousel 和 tiny-slider。它们似乎都是为固定宽度的卡片/滑块设计的。一旦我更改当前活动滑块的尺寸，它的位置就会丢失。你在任何地方见过类似的东西吗？欢迎任何示例或想法（最好是 React.js 解决方案）。

Answer 1

使用猫头鹰轮播插件。你可以很容易地使用它，它有使用 npm 安装的说明。创建滑块后，只需为具有 active 类的 owl-item 提供您想要的样式。我已经为您创建了主要的 css 和 HTML 结构。只需将所需的依赖项添加到您的反应项目并使用它。

$('.owl-carousel').owlCarousel({

    loop:true,

    margin:10,

    autoWidth:true,

    center:true,

    nav: false,

    autoplay: true,

    autoplayTimeout: 3000,

    autoplayHoverPause: true,

    responsiveClass:true,

    responsive:{

        0:{

            items:1

        },

        600:{

            items:4

        },

        1000:{

            items:5

        }

    }

})

body{

  direction: ltr

}

.owl-carousel .owl-stage{

  display: flex;

  justify-content: center;

  align-items: flex-end;

}

.owl-carousel .owl-item .item{

  width: 120px;

  min-height: 120px;

  background-color: lightblue;

}

.owl-carousel .owl-item.active.center .item {

  width: 160px;

  height: 200px;

  background-color: pink;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />

<link  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 {

  background: #fff;

  border: 1px solid #a5a5a5;

}

.owl-theme .owl-dots .owl-dot.active span, 

.owl-theme .owl-dots .owl-dot:hover span {

  background: #a5a5a5;

}

</style>

<div class="owl-carousel owl-theme">

    <div class="item"><h4>1</h4></div>

    <div class="item"><h4>2</h4></div>

    <div class="item"><h4>3</h4></div>

    <div class="item"><h4>4</h4></div>

    <div class="item"><h4>5</h4></div>

    <div class="item"><h4>6</h4></div>

    <div class="item"><h4>7</h4></div>

    <div class="item"><h4>8</h4></div>

    <div class="item"><h4>9</h4></div>

    <div class="item"><h4>10</h4></div>

    <div class="item"><h4>11</h4></div>

    <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({

  centerMode: true,

  slidesToShow: 3,

  centerPadding: "15%",

  speed: 500

});