我无法制作jQuery jcarousel我不知道为什么。这是我的HTML标记：
<div id="carousel-hl-assistant" class="jcarousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active hla-b1">
<div class="container">
<div class="col-sm-12 text-center"><h3>Hublife is cloud hosted to centralize data - allowing users to access and use their accounts anywhere,
anytime and on any device with the same <strong><em>simple-to-use</em></strong> and intuitive User Experience.</h3></div>
<div class="col-sm-12 text-center">
<img src="images/img/hl-cloud.png" class="img-responsive">
</div>
</div>
</div>
<div class="item hla-b2">
<div class="container">
<div class="col-sm-12 text-center">
<h3>Everything to manage daily life needs with fast, convenient and money saving solutions in one central Hub</h3>
</div>
<h4 class="col-sm-12 text-center">
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-cal.png" class="img-responsive"><span>Calendar</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-lists.png" class="img-responsive"><span>Lists</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-notes.png" class="img-responsive"><span>Notes</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-contacts.png" class="img-responsive"><span>Contacts</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-maps.png" class="img-responsive"><span>Maps</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-e-comm.png" class="img-responsive"><span>Shopping</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-media.png" class="img-responsive"><span>Media</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-coupons.png" class="img-responsive"><span>Coupons</span></div>
</h4>
</div>
</div>
<div class="item hla-b3">
<div class="container">
<div class="col-sm-4">
<img src="images/img/hl-4w.png" class="img-responsive">
</div>
<div class="col-sm-8 text-center">
<h3>Hublife utilizes a uniquely secure customer profile system that filters and
delivers real time relevant and timely content to assist with daily needs
without <strong>EVER</strong> identifying the individual user.
</h3>
<h3 class="col-sm-12">
<div class="col-xs-4"><img src="images/img/hl-no-cookies.png" class="img-responsive"></div>
<div class="col-xs-4"><img src="images/img/hl-no-spam.png" class="img-responsive"></div>
<div class="col-xs-4"><img src="images/img/hl-no-email-track.png" class="img-responsive"></div>
</h3>
</div>
</div>
</div>
<div class="item hla-b4">
<div class="container">
<div>
<h3 class="text-center"><img src="images/img/hl-3s.png" class="img-responsive" style="vertical-align:middle; display:inline-block"> Save, Share and Post everything</h3>
</div>
</div>
</div>
<div class="item hla-b5">
<div class="container">
<div class="col-sm-12 text-center">
<h3>Hublife is universally dynamic, and comes in <strong>5</strong> languages</h3>
</div>
<h4 class="col-sm-12 text-center">
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-en.png" class="img-responsive"><span>English</span></div>
<div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-fr.png" class="img-responsive"><span>French</span></div>
<div class="col-sm-2 col-xs-4 text-center"><img src="images/img/hl-ge.png" class="img-responsive"><span>German</span></div>
<div class="col-sm-2 col-xs-4 text-center"><img src="images/img/hl-sp.png" class="img-responsive"><span>Spanish</span></div>
<div class="col-sm-2 col-xs-4 text-center"><img src="images/img/hl-it.png" class="img-responsive"><span>Italian</span></div>
</h4>
</div>
</div>
<div class="item hla-b6">
<div class="container">
<div class="col-sm-12 text-center">
<h3>BTW, Hublife is completely <strong><em>FREE</em></strong>, Nada, Nothing</h3>
</div>
<div class="col-sm-12 text-center">
<a href="#" class="btn btn-lg btn-success">Sign Up Now</a>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control jcarousel-control-prev" href="#" > <span class="fa fa-arrow-circle-left fa-2x"></span> </a>
<a class="right carousel-control jcarousel-control-next" href="#" > <span class="fa fa-arrow-circle-right fa-2x"></span> </a>
</div>
这是我正在使用的JavaScript
(function($) {
$(function() {
$('.jcarousel').jcarousel({items: ".item"});
$('.jcarousel-control-prev')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
});
})(jQuery);
没有任何事情发生，控制根本不起作用。
答案 0 :(得分：1)
好的，我已经对它进行了分类 - 花了一段时间！
您需要确保.items不是display:none，否则jquery将无法正常工作。
你还需要设置你的jCarousel js：
$('.jcarousel').jcarousel({
list: ".carousel-inner",
items: ".item"
});
将你的jcarousel课程移到顶级div：
<div id="carousel-hl-assistant" class="jcarousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
然后添加以下样式：
.jcarousel {
position: relative;
overflow: hidden;
width: 100%;
height:285px;
}
.carousel-inner
{
width: 20000em;
position: relative;
height:285px;
}
.jcarousel .item {
float: left;
//you should add a width here to make sure each .item is as large as the .jcarousel width so you get no overlapping. Can't use 100% as .carousel-inner is 20000em (not sure why it's this wide)
}