css - 仅使用 CSS 的 Bootstrap 自定义轮播

Question

我试图用 css 产生一些效果，只是为了扩展 Bootstrap，它确实工作正常，但只有当点击发生在右箭头时，但当 是在左箭头时，它什么都不做......也许我错过拼写的东西，但我看不到它...提前致谢:)

#sigle-items-slider .item {
    -webkit-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -moz-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -ms-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -o-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
}

#sigle-items-slider .active.left {
    left:0;
    opacity:0;
    z-index:2;
}

#sigle-items-slider .active.right {
    right:0;
    opacity:0;
    z-index:2;
}
#sigle-items-slider .next {
    left:0;
    opacity:1;
    z-index:1;
}

#sigle-items-slider .prev {
    left:0;
    opacity:1;
    z-index:1;
}

更新

抱歉花了点时间，这是一个jsfiddle

Answer 1

你在错误的选择器上初始化:

http://jsfiddle.net/uDvBL/2/

$("#sigle-items-slider").carousel({
    interval: 1000
})

#sigle-items-slider .item {
    left: 0 !important;
    -webkit-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -moz-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -ms-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -o-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
}

#sigle-items-slider .active.left {
    left:0;
    opacity:0;
    z-index:2;
}

#sigle-items-slider .active.right {
    right:0;
    opacity:0;
    z-index:2;
}
#sigle-items-slider .next {
    left:0;
    opacity:1;
    z-index:1;
}

#sigle-items-slider .prev {
    left:0;
    opacity:1;
    z-index:1;
}