前端全屏(轮播)滚动插件

2,146 阅读2分钟

全屏滚动

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,针对移动和桌面网络浏览器进行了优化。

它具有滑动、鼠标和键盘导航、过渡效果、幻灯片功能、全屏支持、按需加载内容等功能,并可扩展以显示更多的内容类型。