全屏滚动
1、fullpage.js
fullPage.js 是一个基于 jQuery
的插件,它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js
。
fullPage.js
的主要功能有:支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3
动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
支持 Vue
版本 vue-fullpage.js
2、pagePiling.js
与其他的全屏滚动插件相比,pagePiling.js
的主要特点是滚动方式,它把所有“页面”叠在一起,使用 translate3d
“抽”动页面,产生了一种类似“视觉差”的效果。
3、Swiper
在轮播器的基础上,同样支持全屏滚动。
轮播器
1、Swiper
Swiper
是最现代的免费移动触摸幻灯片,具有硬件加速过渡和惊人的本地行为。它旨在用于移动网站,移动Web应用程序和移动本机/混合应用程序。
Swiper
并不兼容所有平台,它是一款只专注于现代应用/平台的现代触摸幻灯片,带来最好的体验和简单的操作。
2、Owl Carousel 2
支持触摸的 jQuery
插件,让你创建一个漂亮的响应式转盘幻灯片。猫头鹰旋转木马已经被数百名开发者选为头号 jQuery
插件。
现在是时候推出新的版本了,它带来了很多新的功能和更多用户友好的API。
3、 Slick Slider
完全响应,随容器缩放,每个断点的单独设置在可用时使用 css3
,如果没有,则功能齐全。桌面鼠标拖动无限循环,通过箭头键导航可完全访问添加,删除,过滤和取消过滤幻灯片自动播放,点,箭头,回调等。
4、ItemSlider
有关如何使用 css
动画和 jQuery
创建具有最小设计的简单类别幻灯片的教程,其思想是根据滑动方向顺序地滑动项目。
5、blueimp Gallery
blueimp Gallery
是一个支持触摸的、响应式的、可定制的图片和视频画廊、旋转木马和lightbox
,针对移动和桌面网络浏览器进行了优化。
它具有滑动、鼠标和键盘导航、过渡效果、幻灯片功能、全屏支持、按需加载内容等功能,并可扩展以显示更多的内容类型。