我正在尝试实现一个响应式旋转木马,它支持自动播放无限循环,而中心项目总是占用视口的70%。
现在我可以利用名为Slick的库来做到这一点:
https://codepen.io/anon/pen/pBvQBM
$('.slick')
.on('init', () => {
$('.slick-slide[data-slick-index="-2"]').addClass('lt2');
$('.slick-slide[data-slick-index="-1"]').addClass('lt1');
$('.slick-slide[data-slick-index="1"]').addClass('gt1');
$('.slick-slide[data-slick-index="2"]').addClass('gt2');
})
.slick({
centerMode: true,
centerPadding: 0,
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 500,
}).on('beforeChange', (event, slick, current, next) => {
$('.slick-slide.gt2').removeClass('gt2');
$('.slick-slide.gt1').removeClass('gt1');
$('.slick-slide.lt1').removeClass('lt1');
$('.slick-slide.lt2').removeClass('lt2');
const lt2 = (current < next && current > 0) ? current - 1 : next - 2;
const lt1 = (current < next && current > 0) ? current : next - 1;
const gt1 = (current < next || next === 0) ? next + 1 : current;
const gt2 = (current < next || next === 0) ? next + 2 : current + 1;
$(`.slick-slide[data-slick-index="${lt2}"]`).addClass('lt2');
$(`.slick-slide[data-slick-index="${lt1}"]`).addClass('lt1');
$(`.slick-slide[data-slick-index="${gt1}"]`).addClass('gt1');
$(`.slick-slide[data-slick-index="${gt2}"]`).addClass('gt2');
// Clone processing when moving from 5 to 0
if (current === 5 && next === 0) {
$(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('lt2');
$(`.slick-slide[data-slick-index="${current}"]`).addClass('lt1');
$(`.slick-slide[data-slick-index="${current + 2}"]`).addClass('gt1');
$(`.slick-slide[data-slick-index="${current + 3}"]`).addClass('gt2');
}
// Clone processing when moving from 0 to 5
if (current === 0 && next === 5) {
$(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('gt2');
$(`.slick-slide[data-slick-index="${current}"]`).addClass('gt1');
$(`.slick-slide[data-slick-index="${current - 2}"]`).addClass('lt1');
$(`.slick-slide[data-slick-index="${current - 3}"]`).addClass('lt2');
}
console.log('beforeChange', current, ':', lt2, lt1, next, gt1, gt2);
});
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20vh 0;
}
.slick span {
display: block;
background: #3498db;
color: #fff;
font-size: 36px;
height: 100px;
line-height: 100px;
position: relative;
text-align: center;
//border: solid 1px rgb(145, 195, 0);
transform: translate(0, 0) scale(.4);
transition: all .4s ease;
opacity: .5;
}
.slick-slide {
border: solid 1px #2dc37f;
}
.slick-slide.lt2 span {
transform: translate(10%, 0) scale(.6);
}
.slick-slide.lt1 span {
opacity: .7;
transform: translate(5%, 0) scale(.8);
}
.slick-slide.gt1 span {
opacity: .7;
transform: translate(-5%, 0) scale(.8);
}
.slick-slide.gt2 span {
transform: translate(-10%, 0) scale(.6);
}
.slick-slide.slick-center span {
z-index: 1;
transform: scale(1);
opacity: 1;
color: #e67e22;
}
.slick-prev,
.slick-next{
position: absolute;
top: 50%;
appearance: none;
margin-top: -10px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: transparent;
outline: none;
z-index: 100;
}
.slick-prev {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #007bff transparent transparent;
left: 0;
}
.slick-next {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #007bff;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="slick">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
</div>
但是,这并不是我想要的。在这个演示中,所有三个项目具有相同的宽度,但我希望中心项目具有70%的宽度,如下所示:
请分享一些关于如何实现这一目标的指示。我不仅限于这个Slick库,而是打开任何其他选项,如纯CSS或JQuery。
你实际上并不太遥远,你只是与你的风格定位有点不一致。我在跨度上取下了一堆样式,并在幻灯片div上添加了几个样式:
https://codepen.io/anon/pen/PgwXbV
你可能会调整一些细节,但我认为这个CSS非常接近你想要的效果:
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20vh 0;
}
.slick span {
display: block;
background: #3498db;
color: #fff;
font-size: 36px;
height: 100px;
line-height: 100px;
position: relative;
text-align: center;
/* border: solid 1px rgb(145, 195, 0); */
/* make the non-centered slides partially transparent */
opacity: .5;
}
.slick-slide {
border: solid 1px #2dc37f;
/* make the non-centered slides smaller */
transform: scale(.5);
transition:transform .4s ease;
}
.slick-slide.slick-center {
/* make the center slide full size */
transform: scale(1);}
.slick-slide.slick-center span {
z-index: 1;
transform: scale(1);
/* make the centered slides solid */
opacity: 1;
color: #e67e22;
}
.slick-prev,
.slick-next{
position: absolute;
top: 50%;
appearance: none;
margin-top: -10px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: transparent;
outline: none;
z-index: 100;
}
.slick-prev {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #007bff transparent transparent;
left: 0;
}
.slick-next {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #007bff;
right: 0;
}
这部分似乎没有必要改变,虽然我看到你的目的:
.slick-slide.lt2 span {
transform: translate(10%, 0) scale(.6);
}
.slick-slide.lt1 span {
opacity: .7;
transform: translate(5%, 0) scale(.8);
}
.slick-slide.gt1 span {
opacity: .7;
transform: translate(-5%, 0) scale(.8);
}
.slick-slide.gt2 span {
transform: translate(-10%, 0) scale(.6);
}