响应式全屏CarouFredSel幻灯片

这是一个自我问答。

我一直在用令人惊叹的CarouFredSel滑块插件开发很长一段时间了。 每次我必须制作一个需要在宽度和高度上响应的全屏幻灯片时，我忘了怎么做。 所以我为我和所有其他与之斗争的人做了这个问答。

所以，这是一个问题：

你如何制作全屏，反应灵敏的CarouFredSel幻灯片？

Answer 1

关键是在启动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'); });