这是一个自我问答。
我已经使用令人惊叹的 CarouFredSel 滑块插件进行开发很长时间了。每次我必须制作需要在宽度和高度上响应的全屏幻灯片时,我都会忘记该怎么做。所以我为我和所有其他为此苦苦挣扎的人做了这个问答。
所以,问题是:
如何制作全屏、响应式 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');
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)