我正在使用carouFredSel处理我的响应式旋转木马的高度问题.
因为图像是响应的并且旋转木马也被设置为响应.
它仍然将图像的最大高度添加到div.
当我的图像宽740,高度为960时,它会将图像调整到响应宽度以适应屏幕,图像也会重新调整以适应宽度,但div似乎仍然认为图像的高度为960.
我该如何解决这个问题？
我想突出显示当前项目,如何获取图像源和当前缩略图？ http://jsfiddle.net/RL8MV/2/
$('#carousel span').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
responsive: true,
circular: false,
auto: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: true,
infinite: true,
auto: {
play:true
},
scroll:
{
items: 1,
onBefore: function() {
var pos = $("#thumbs").triggerHandler("currentPosition");
// alert( "The carousel is at item number " + pos );
}
},
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2, …我正在使用令人敬畏的CarouFredSel JQuery carousel插件,其中包含用于集成手持设备的JQuery TouchSwipe库的功能.
轮播元素是div,div中是包含在<ahref>标签中的图像和文本.
一切都按预期工作,但我注意到如果轮播元素(在本例中为div)包含链接,则对各种移动设备的滑动效果不起作用.
如果我删除图像/文本周围的链接,滑动动作工作正常.这几乎就像preventDefault()反向工作一样.如果我删除图像周围的链接,并将文本保留为链接,则滑动适用于图像,而不是文本.
我可以轻松点击该项目作为链接,如果它是一个链接,我只是无法刷卡.
有没有人特别遇到CarouFredsel这个问题？
非常感谢,所以.
我正在使用这个卷轴
http://coolcarousels.frebsite.nl/c/2/
我在下面有这个设置.
我的问题是我设置了它visible: 4,我有4个图像,所以它不滚动.如果我将它设置为visible: 3然后它按预期工作.但是,当您在1920px宽分辨率上打开浏览器的全宽时,我想在一个屏幕上显示所有4个图像.所以问题似乎是.如果我将图像数量设置为可见,那么它就会停止工作.
有没有办法一次在屏幕上显示所有4个图像然后仍然滚动它们？
$(function() {
$('#carousel').carouFredSel({
width: '100%',
align: 'left',
items: {
visible: 4,
start: 0,
},
scroll: {
items: 1,
queue : true,
fx: "scroll",
easing: "swing",
duration: 1000,
timeoutDuration: 3000
},
prev: '.prev',
next: '.next',
auto: {
easing: "quadratic",
button: '.play',
pauseOnEvent: 'resume',
pauseOnHover: true
}
}).find(".slide .plusNav").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
});
我目前正在使用carouFredSel.js在我的网站上提供全宽旋转木马.我选择这个插件是因为它具有全宽度功能,能够在屏幕的左右边缘部分显示上一个和下一个图像.
我也使用Bootstrap 3,但是没有成功实现相同的行为,所以这就是我选择使用插件的原因.
我遇到的问题是让旋转木马响应.该插件有一个选项,通过在选项中添加'responsive:true'来使其响应,但是当我这样做时,它会破坏布局.
我的代码与占位符图像可以在http://jsfiddle.net/vUCZ8/找到.我建议在http://jsfiddle.net/vUCZ8/embedded/result/查看全屏结果
#intro {
width: 580px;
margin: 0 auto;
}
.wrapper {
background-color: white;
width: 480px;
margin: 40px auto;
padding: 50px;
box-shadow: 0 0 5px #999;
}
#carousel img {
display: block;
float: left;
}
.main-content ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.main-content li {
display: block;
float: left;
}
.main-content li img {
margin: 0 20px 0 20px;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix …我正在使用carouFredSel创建一个垂直旋转木马.一切都很好,除了我希望部分项目显示在底部,裁剪,而不是隐藏.这样,它将向用户指示可以滚动的其他项目.
我一直在阅读文档,但到目前为止还无法判断我所追求的是否可行.
看看JSFiddle,看看我的意思.观看页面上最底部的项目.
使用Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});?
我建立一个caroufredsel为响应网站(只有3种状态:960px,720px和320px).当您在其中一个状态下加载页面时,它工作得很好.它显示正确的项目数(分别为3,2和1).但是,当您调整窗口大小时,可见项目的数量不会更改.我正在考虑一个$(window).resize() 电话,但我无法找到如何在初始化后调整Caroufredsel设置.
$('#caroufredsel').carouFredSel({
infinite: true,
auto: false,
pagination: false,
prev: {
button: '#prev',
key: 'left'
},
swipe: {
onTouch: true,
onMouse: true
},
next: {
button: '#next',
key: 'right'
},
items: {
visible: 'variable'
}
});
我carouFredSel用来制作Slider,但是不能设置持续时间.它可能会运行默认值.
我设置如下:
$("#foo6").carouFredSel({
auto: true,
responsive: true,
duration: 2000,
prev: "#prev6",
next: "#next6",
scroll: 1,
pagination: "#pager6",
mousewheel: true,
items: {
visible: 1,
width: 200
}
});
说我解决我的问题.
我在CarouFredSel上使用这个代码它工作正常,现在我想让它淡化而不是从左到右滑动.
jQuery(document).ready(function($) {
$("#slider_home").carouFredSel({
width : "100%",
height : "auto",
responsive : true,
circular : true,
infinite : false,
auto : false,
swipe : { onTouch : true, onMouse : true },
prev : { button : "#sl-prev", key : "left"},
next : { button : "#sl-next", key : "right" }
});
});
我在caroufredsel中遇到了一个问题,我在Asp.net Webforms中使用了一个jquery carousel插件.在我调整窗口大小之前,旋转木马不会显示.我可以在最新版本的Google Chrome和Firefox中看到这个问题.
使用Javascript
$(window).load(function() {
$("#slider").carouFredSel({
circular: true,
infinite: true,
responsive: true,
direction: "left",
width: "100%",
height: "auto",
auto: true,
align: "center",
padding:0,
items: {
visible: 2,
minimum: 2,
width: "variable",
height: "100%"
},
scroll: {
items:1,
pauseOnHover:true
}
});
});
CSS
#slider .slider-wrapper {
position:relative !important;
display: block;
padding-right: 10px;
float: left;
width:554px;
}
.... all other related to design
我在JSbin中创建副本时能够复制该问题.全屏预览在这里http://jsbin.com/uyewewo/3