我的网页上有一个jcarousel滑块,基本版本(只有一个图像显示的那个),我似乎无法调整媒体查询div jcarousel滑块。
这是HTML CODE
<div id="mycarousel">
<div class="wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="img/macu/slide1.png" width="700" height="500" alt=""></li>
<li><img src="img/macu/slide5.png" width="700" height="500" alt=""></li>
</ul>
/div>
<a href="#" class="jcarousel-control-prev"></a>
<a href="#" class="jcarousel-control-next"></a>
<!--
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
-->
<!-- <p class="jcarousel-pagination"> -->
</p>
</div>
</div>
</div>
这是我的css
@media screen and (max-width:545px){
//body {background:orange;}
#content {
width:43%;
height:auto;
}
#media,#vignette {
width:auto;
height:auto;
}
#menu {
width:32%;
font-size:80%;
}
.jcarousel{
width:22%;
//font-size:80%;
}
}
这是js
(function($) {
$(function() {
$('.jcarousel').jcarousel();
$('.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'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.jcarouselPagination();
});
})(jQuery);
我是否必须更改js中的任何内容?我发现有一个响应式jcarousel但它同时显示3张图片... http://sorgalla.com/jcarousel/examples/responsive/
谢谢你:)
答案 0 :(得分:0)
您还可以根据容器尺寸显示不同数量的项目。
$('.jcarousel')
.on('jcarousel:create jcarousel:reload', function() {
var element = $(this),
width = element.innerWidth();
if (width > 900) {
width = width / 3;
} else if (width > 600) {
width = width / 2;
}
element.jcarousel('items').css('width', width + 'px');
})
.jcarousel({
// Your configurations options
});
所以,如果你想要显示超过3张图片,你只需更改宽度/ 4