我尝试在我的页面中使用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'
正在工作,但没有设置宽度为什么?
答案 0 :(得分:3)
第二个滑块的脚本
$(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>
答案 1 :(得分:2)
我找到了解决方案。
<强>替换强>
jcarousel.jcarousel('items').css('width', width + 'px');
<强>与强>
jcarousel.jcarousel('items').css('width', width + 'px');
var element_width = $("#jc1 li").width();
$("#jc2 li").each(function(){
$(this).css("width",element_width);
});
谢谢,
Puspendu
答案 2 :(得分:0)
不是重复整个功能,你可以只玩下面的小东西;
调用该函数的jQuery脚本:
<script type="text/javascript">
$(function() {
//Initiate slider-one
$('.slider-one .jcarousel')
.jcarousel({
// Core configuration goes here
})
.jcarouselAutoscroll({
interval: 1000,
target: '+=1',
autostart: true
});
//Initiate slider-two
$('.slider-two .jcarousel')
.jcarousel({
// Core configuration goes here
})
.jcarouselAutoscroll({
interval: 500,
target: '+=1',
autostart: true
});
//Initiate slider-three
$('.slider-three .jcarousel')
.jcarousel({
// Core configuration goes here
})
.jcarouselAutoscroll({
interval: 500,
target: '+=1',
autostart: true
});
});
</script>
<强> HTML:强>
<!-- slider-one BEGINS -->
<div class="banner slider-one">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="images/banner1.png"></li>
<li><img src="images/banner2.png"></li>
<li><img src="images/banner3.png"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
<a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
<p class="jcarousel-pagination"></p>
</div>
</div>
<!-- slider-one ENDS -->
<!-- slider-two BEGINS -->
<div class="banner slider-two">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="images/banner1.png"></li>
<li><img src="images/banner2.png"></li>
<li><img src="images/banner3.png"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
<a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
<p class="jcarousel-pagination"></p>
</div>
</div>
<!-- slider-two ENDS -->
<!-- slider-three BEGINS -->
<div class="banner slider-three">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="images/banner1.png"></li>
<li><img src="images/banner2.png"></li>
<li><img src="images/banner3.png"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
<a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
<p class="jcarousel-pagination"></p>
</div>
</div>
<!-- slider-three ENDS -->