只带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;
}