更改具有不同宽度的项目目标
Changing items target with different width
我有一个旋转木马(Sorgalla的carrousel),里面有一系列物品。我希望,例如,如果窗口的宽度小于1024px,则它针对滚动上的3个项目,如果宽度小于640px,则针对2个项目,并且如果宽度小于320px,则目标为1个项目。
我尝试了这个代码,但没有成功(每次调整大小都需要有一个重新加载功能,以便使用新的滚动选项重新加载carrousel):
HTML代码是:
<div class="box1"><a href="#addimg" class="plus2"></a><div id="addimg" style="width: 17.4%;height: 25px;" class="white-popup mfp-hide">
<input type="button" id="baddimg" style="float: left;" value="Añadir imágenes" onClick="addInput('dynamicInput');" />
<div id="loading"></div>
</div><a href="#" class="jcarouselimgs-control-next arrowimg-next"></a><a href="#" class="jcarouselimgs-control-prev arrowimg-prev"></a><h2 class="infotitle">OUR PORTFOLIO</h2>
<div class="jcarouselimgs" data-jcarousel="true">
<ul class="popupimg">
<li><a href="Imagenes/img1.png" class="image-link"><img src="Imagenes/img1.png" alt="Img1" title="Img1"></a></li>
<li><a href="Imagenes/img2.png" class="image-link"><img src="Imagenes/img2.png" alt="Img2" title="Img2"></a></li>
<li><a href="Imagenes/img3.png" class="image-link"><img src="Imagenes/img3.png" alt="Img3" title="Img3"></a></li>
<li><a href="Imagenes/img4.jpg" class="image-link"><img src="Imagenes/img4.jpg" alt="Img4" title="Img4"></a></li>
<li><a href="Imagenes/img5.jpg" class="image-link"><img src="Imagenes/img5.jpg" alt="Img5" title="Img5"></a></li>
<li><a href="Imagenes/img6.jpg" class="image-link"><img src="Imagenes/img6.jpg" alt="Img6" title="Img6"></a></li>
</ul>
</div>
</div>
JQuery代码,我尝试了两种方法,这是:
$(window).resize(function(){
if ($(".sampleClass").css("float") == "none" ){
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=1'
});
$('.arrowimg-next').jcarouselControl({
target: '+=1'
});
// your code here
}
});
$(window).resize(function(){
if ($(".sampleClass2").css("float") == "none" ){
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=3'
});
$('.arrowimg-next').jcarouselControl({
target: '+=3'
});
// your code here
}
});
管理示例CSS类以设置宽度:
.sampleClass {float:left;}
@media only screen and (max-width: 350px){
.sampleClass {float:none;}
}
.sampleClass2 {float:left;}
@media only screen and (max-width: 1024px){
.sampleClass2 {float:none;}
我也尝试过这种方式,但都没有结果:
(function () {
if ($(window).width() < 300) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=1'
});
$('.arrowimg-next').jcarouselControl({
target: '+=1'
});
$('h1').addClass('blue');
}
if ($(window).width() < 640) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'slow'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=2'
});
$('.arrowimg-next').jcarouselControl({
target: '+=2'
});
}
if ($(window).width() > 1024) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=3'
});
$('.arrowimg-next').jcarouselControl({
target: '+=3'
});
}
});
使用这个旋转木马,效果更好:http://jssor.com/demos/introduction-slider.html
相关文章:
- 正在将数据主题添加到所有项目
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何检查管道中未定义的项目
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 学生搜索项目jquery/javascript
- 如何获取不属于我项目的上一页的URL
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- Dojo:访问dijit.form.Select中单击的项目
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 我需要为我的朋友在这个项目上提供帮助
- 如何从 HTML 查询中删除项目
- 在Meteor项目中安装并包含npm模块后出错
- 离子项目中的多个触摸目标
- 当目标处于顶部滚动状态时,如何从菜单中激活项目
- 有没有一种方法可以根据包含整数的最接近属性来确定项目的目标
- 射击目标:单击鼠标->保留项目符号Hole.gif
- 选择2 -清除所有不工作的项目时,目标的职业
- 更改具有不同宽度的项目目标
- Humble Haxe,在非 haxe 友好的目标项目中自动合并 haxe 的方法