Question

目前正在使用Bootstrap 3.xx创建一个网站，在让旋转木马正常工作方面遇到一些麻烦。

网站版本 - www.solo-fusion.com/test/index.htm

<div id="Carousel" class="carousel slide col-lg-8 col-offset-2">
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
        <div class="item active">
            <img src="//placehold.it/500x500" class="img-responsive">
        </div>
       <div class="item">
         <img src="//placehold.it/500x500/EEEEEE" class="img-responsive">
        </div>
       <div class="item">
         <img src="//placehold.it/500x500/FEFEFE" class="img-responsive">
        </div>
    </div>

    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

这是我正在使用的代码段，以及CSS

.carousel {
    height: 500px;
    margin-bottom: 60px;
}
.carousel-caption {
    z-index: 10;
}
.carousel .item {
    height: 500px;
    background-color: #777;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

不太确定我在这里做错了什么，但结果有点时髦。

http://i.imgur.com/ChEKFqz.png

任何帮助都会有很好的帮助：）

UPDATE 我已经设法以某种方式让它开始滚动，使用以下JS做某事

<script type="text/javascript">

$(document).ready(function() {
    $('#Carousel').carousel({
    //options here
    });
});

</script>

P.S。仍然破了：L

更新＃2

这是旋转木马的jkit.css的一部分，因为有人建议它可能是造成它的原因。

div.carousel {
overflow: hidden;
pointer-events: none;
text-align: center;
width: 100%;
height: 150px;
}

div.carousel-item {
float: left;
width: 20%;
height: 150px;
background: #E01B49;
margin: 0px;
padding: 0px;
text-align: center;
color: #fff;
font-weight: bold;
line-height: 200%;
}

div.carousel-item div {
padding: 20px;
border: 1px #fff solid;
height: 110px;
}

a.jkit-carousel-prev, a.jkit-carousel-next {
width: 40px;
background: #eee;
border: 1px #999 solid;
color: #333;
padding: 4px;
cursor: pointer;
cursor: hand;
margin-top: 10px;
text-align: center;
user-select: none;
}

a.jkit-carousel-prev:hover, a.jkit-carousel-next:hover {
background: #fff;
border: 1px #666 solid;
color: #000;
}

a.jkit-carousel-prev {
float: left;
}

a.jkit-carousel-next {
float: right;
}

Answer 1

似乎有效的一种方式：

Bootply ：http://www.bootply.com/123416

CSS ：

div.carousel {
overflow: hidden;
//pointer-events: none;
text-align: center;
width: 100%;
height: 150px;
}

div.carousel .item {        // <--- HERE
float: left;
width: 100%;
height: 150px;
background: #E01B49;
margin: 0px;
padding: 0px;
text-align: center;
color: #fff;
font-weight: bold;
line-height: 200%;
}

div.carousel .item img {   // <--- HERE
display:inline;
  height:100%;
}

a.jkit-carousel-prev, a.jkit-carousel-next {
width: 40px;
background: #eee;
border: 1px #999 solid;
color: #333;
padding: 4px;
cursor: pointer;
cursor: hand;
margin-top: 10px;
text-align: center;
user-select: none;
}

a.jkit-carousel-prev:hover, a.jkit-carousel-next:hover {
background: #fff;
border: 1px #666 solid;
color: #000;
}

a.jkit-carousel-prev {
float: left;
}

a.jkit-carousel-next {
float: right;
}

Bootstrap轮播显示不正确

1 个答案: