我有一个bootstrap carousel(bootstrap 3.2),其中我使用jquery将活动类分配给第一个元素。旋转木马的内容是动态拉动的,这就是我这样做的原因。 这是代码
Html:
<div id="Carousel2" class="carousel slide">
<div class="carousel-inner" id="test">
<div class="item active"><p>test1</p></div>
<div class="item"><p>test2</p></div>
<div class="item"><p>test3</p></div>
<div class="item"><p>test4</p></div>
<div class="item"><p>test5</p></div>
<div class="item"><p>test6</p></div>
</div>
<a data-slide="prev" href="#Carousel2" class="left carousel-control"><</a>
<a data-slide="next" href="#Carousel2" class="right carousel-control">></a>
</div>
JS:
<script>
$( document ).ready(function() {
$(".carousel-inner div:first").addClass("active");
});
</script>
CSS:
.carousel-indicators {
bottom:20px;
position: absolute;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li, .carousel-indicators li.active {
background-color: #E3E3E4;
border: 1px solid #B6B7B9;
width: 15px;
height: 15px;
margin:0;
display: inline-block;
text-indent: -999px;
border-radius: 10px;
cursor: pointer;
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img {
display: block;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
ul.thumbnails-carousel img {
margin: 0 auto;
object-fit: cover;
width: 100%;
height: 150px;
margin-bottom: 10px;
}
ul.product-images.thumbnails-carousel {
padding-top: 0;
}
@media only screen and (min-width: 749px){
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
width: 100%;
}
}
@media only screen and (min-width: 1025px){
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
width: 100%;
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.product-featured h2 {
font-size: 20px;
text-align: left;
}
.product-featured .featured-collection {
margin:80px auto;
}
.product-top-description {
width:60%;
text-align: center;
margin: 0 auto;
padding: 30px 0;
}
[data-slide-to] {
cursor: pointer;
}
a.right.carousel-control {
position: absolute;
top: 25%;
right: 0;
}
a.left.carousel-control {
position: absolute;
top: 25%;
}
这很好用,但我需要每行显示2个项目。所以在开始时test1和test2需要显示,然后点击它转到test3和test4等。
我不能把这两个元素放在一个项目中,就像我上面所说的那样,内容是动态提取的。
在这种情况下如何实现这一目标?