这是一个自我Q& A.
我一直在用令人惊叹的CarouFredSel滑块插件开发很长一段时间了.每次我必须制作一个需要在宽度和高度上响应的全屏幻灯片时,我忘了怎么做.所以我为我和所有其他与之斗争的人做了这个Q& A.
所以,这是一个问题：
你如何制作全屏,反应灵敏的CarouFredSel幻灯片？
解决方法
关键是在启动CarouFredSel之前调整幻灯片的大小,然后在窗口大小调整时刷新图库和幻灯片大小.当我初始化CarouFredSel时,要注意高度和响应参数.
function sizeGallery(){
// Set size of slides and gallery
var winHeight = jQuery(window).height();
var winWidth = jQuery(window).width();
jQuery('.gallery,.gallery .slide').width(winWidth).height(winHeight);
}
function startGallery() {
// Start carouFredSel as a Fullscreen slideshow
jQuery('.gallery').carouFredSel({
circular: true,infinite: true,responsive: true,height: 'variable',scroll: {
items: 1
},items: {
visible: 1,height: 'variable'
}
});
}
jQuery(document).ready(function(){
sizeGallery();
startGallery();
});
jQuery(window).resize(function(){
sizeGallery();
jQuery('.gallery').trigger('updateSizes');
});
