TA貢獻1825條經驗 獲得超4個贊
使用貓頭鷹輪播插件。你可以很容易地使用它，它有使用 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>
TA貢獻1834條經驗 獲得超8個贊
用光滑的https://codepen.io/ealigam/pen/yEzQPP查看這個例子
我可以通過稍微調整使其看起來與您描述的非常相似
$('.slider').slick({
centerMode: true,
slidesToShow: 3,
centerPadding: "15%",
speed: 500
});
舉報