旋转木马多前一个按钮

时间:2015-03-11 21:53:51

标签: jquery css twitter-bootstrap carousel

http://www.bootply.com/Y30udsQ35V。我已经尝试修复了prev按钮行为,因为他在下一个按钮中有相同的行为,但是,我无法解决。

1 个答案:

答案 0 :(得分:0)

解决问题的一种方法是在css文件中添加以下代码:

.item.right:not(.prev) {visibility: hidden;}

css文件如下:

.carousel-control            { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
@media (max-width: 767px) {
    .carousel-inner .active.left { left: -100%; }
    .carousel-inner .next        { left:  100%; }
    .carousel-inner .prev        { left: -100%; }
    .active > div { display:none; }
    .active > div:first-child { display:block; }
    .item.right:not(.prev) {visibility: hidden;}
}
@media (min-width: 767px) and (max-width: 992px ) {
    .carousel-inner .active.left { left: -50%; }
    .carousel-inner .next        { left:  50%; }
    .carousel-inner .prev        { left: -50%; }
    .active > div { display:none; }
    .active > div:first-child { display:block; }
    .active > div:first-child + div { display:block; }
    .item.right:not(.prev) {visibility: hidden;}
}
@media (min-width: 992px ) {
    .carousel-inner .active.left { left: -25%; }
    .carousel-inner .next        { left:  25%; }
    .carousel-inner .prev        { left: -25%; }    
    .item.right:not(.prev) {visibility: hidden;}
}