cuốn sách gpt4 ai đã làm

具有不同元素位置的 Jquery 轮播

In lại Tác giả: Walker 123 更新时间:2023-11-28 01:57:01 28 4
mua khóa gpt4 Nike

我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ,我给了元素框阴影。但我坚持制作不同位置元素的效果,例如 3d 或任何名称。

这是我想做的 http://www.awesomescreenshot.com/image/3266902/55439cf0aac563ac12aa93f9969a8561

.owl-carousel .owl-item:nth-child(even){
}
.owl-carousel .owl-item:nth-child(odd){
}
.owl-prev{
vị trí: tuyệt đối;
left: -30px;
top: 40%;
}
.owl-next{
vị trí: tuyệt đối;
phải: -30px;
top: 40%;
}
.overlay-card{
background-color:#fff;
height:278px;
padding-top:30px;
bán kính đường viền: 5px;
}
.overlay-card:hover{
con trỏ: con trỏ;
background-color: #00b0ff;
}
.img-rounded{
border-style:solid;
border-color:#fff;
border-width:2px;
border-radius:100px;
chiều cao: 100px;
width:100px;
margin-bottom:10px;
}
.panel.panel-default{
đường viền: không có;
bán kính đường viền: 5px;
/* box-shadow: 10px 17px 50px 0px rgba(0, 0, 0, 0.3); */
}

câu trả lời hay nhất

只需为事件元素添加边距,隐藏其他元素并调整阴影,您可能还需要删除容器或在 js 中调整元素宽度

   .owl-carousel .owl-stage-outer {
padding: 25px 0;
}
.owl-item .panel.panel-default {
đường viền: không có;
bán kính đường viền: 5px;
box-shadow: 10px 5px 40px 5px rgba(0, 0, 0, 0.22);
}
.owl-item:not(.active) .item {
hiển thị: không có;
}
.owl-item.active .panel {
lề trái: -20px;
}
.owl-next,.owl-prev {
bán kính đường viền: 50%;
chiều rộng: 40px;
chiều cao: 40px;
box-shadow: 2px 5px 18px 0 rgba(0, 0, 0, 0.22);
}
.owl-carousel .owl-stage-outer {
height: 360px !important;
}

关于具有不同元素位置的 Jquery 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49566121/

28 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress