我试图在页面中使用JCarousel，以下是我用于多个JCarousel的HTML：
<div class="col-md-12 jcarousel-wrapper">
<div id="jc1" class="jcarousel">
<ul>
<li><img src="images_offer/dest_01.jpg" alt="Image 1"></li>
<li><img src="images_offer/dest_02.jpg" alt="Image 2"></li>
<li><img src="images_offer/dest_03.jpg" alt="Image 3"></li>
<li><img src="images_offer/dest_04.jpg" alt="Image 4"></li>
<li><img src="images_offer/dest_05.jpg" alt="Image 5"></li>
<li><img src="images_offer/dest_06.jpg" alt="Image 6"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a><a href="#" class="jcarousel-control-next">›</a>
</div>
<div class="col-md-12 jcarousel-wrapper">
<div id="jc2" class="jcarousel">
<ul>
<li><img src="images_offer/dest_01.jpg" alt="Image 1"></li>
<li><img src="images_offer/dest_02.jpg" alt="Image 2"></li>
<li><img src="images_offer/dest_03.jpg" alt="Image 3"></li>
<li><img src="images_offer/dest_04.jpg" alt="Image 4"></li>
<li><img src="images_offer/dest_05.jpg" alt="Image 5"></li>
<li><img src="images_offer/dest_06.jpg" alt="Image 6"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a><a href="#" class="jcarousel-control-next">›</a>
</div>
这是我在同一页面中使用的JQuery：
(function($) {
$(function() {
var jcarousel= $('.jcarousel');
jcarousel.on('jcarousel:reload jcarousel:create', function () {
var width = jcarousel.innerWidth();
if (width >= 600) {
width = width / 3;
} else if (width >= 350) {
width = width / 2;
}
jcarousel.jcarousel('items').css('width', width + 'px');
})
$('.jcarousel').jcarousel({
wrap: 'circular'
});
$('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.jcarouselCo ntrol({
target: '+=1'
});
});
})(jQuery);
在这里，问题id='jc1'在使用JQuery宽度时工作正常，但是id='jc2'在起作用，但未设置宽度，为什么呢？
第二个滑块的脚本
$(function() {
$('#second .jcarousel').jcarousel();
$('#second .jcarousel-control-prev')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('#second .jcarousel-control-next')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
$('#second .jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.jcarouselPagination();
});
具有第二个ID的第二个滑块的HTML
<div class="jcarousel-wrapper" id="second">
// second slider
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句