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

Question

我需要在卡片轮播上创建这种效果。我使用 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{
    position: absolute;
    left: -30px;
    top: 40%;
}
.owl-next{
    position: absolute;
    right: -30px;
    top: 40%;
}
.overlay-card{
    background-color:#fff;
    height:278px;
    padding-top:30px;
    border-radius: 5px;
}
.overlay-card:hover{
    cursor: pointer;
    background-color: #00b0ff;
}
.img-rounded{
    border-style:solid;
    border-color:#fff;
    border-width:2px;
    border-radius:100px;
    height:100px;
    width:100px;
    margin-bottom:10px;
}
.panel.panel-default{
    border:none;
    border-radius: 5px;
   /*  box-shadow: 10px 17px 50px 0px rgba(0, 0, 0, 0.3);  */ 
}

Answer 1

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

   .owl-carousel .owl-stage-outer {
        padding: 25px 0;
    }
    .owl-item .panel.panel-default {
        border: none;
        border-radius: 5px;
        box-shadow: 10px 5px 40px 5px rgba(0, 0, 0, 0.22);
    }
    .owl-item:not(.active) .item {
        display: none;
    }
    .owl-item.active .panel {
        margin-left: -20px;
    }
    .owl-next,.owl-prev {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        box-shadow: 2px 5px 18px 0 rgba(0, 0, 0, 0.22);
    }
    .owl-carousel .owl-stage-outer {
        height: 360px !important;
    }