我在codepen中找到了制作卡片滑杆的教程,但是该教程仅支持5张幻灯片,而我需要10张幻灯片。如何修改?
我认为这是要修改的行。
--------------------------------------------------------------*/
/*--------------------------------------------------------------
2.0 Cards
--------------------------------------------------------------*/
.slider__item {
transition: all 0.3s ease;
-webkit-transition-timing-function:
cubic-bezier(0.4, 0.0, 0.2, 1);
transition-timing-function:
cubic-bezier(0.4, 0.0, 0.2, 1);
}
#slide-1:checked ~ .slider__holder .slider__item--1 {
position: relative;
z-index: 2;
transform: translate(0) scale(1);
}
#slide-2:checked ~ .slider__holder .slider__item--1 {
z-index: 1;
transform: translateX(-100px) scale(0.85);
}
@media (max-width: 768px) {
#slide-2:checked ~ .slider__holder .slider__item--1 {
opacity: 0.6;
}
}
#slide-3:checked ~ .slider__holder .slider__item--1 {
z-index: 0;
transform: translateX(-210px) scale(0.65);
}
@media (max-width: 900px) {
#slide-3:checked ~ .slider__holder .slider__item--1 {
transform: translateX(-170px) scale(0.65);
}
}
... etc
,但是很难对其进行修改。 Link对笔进行编码。提前非常感谢您。