Question

我需要在卡片旋转木马上创建此效果。我用猫头鹰旋转木马，我给了物品盒阴影。但我被困在制作不同位置项目的效果，如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;
    }

Jquery旋转木马与不同的项目位置

1 个答案: