安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
使用 jQuery + CSS 实现的4种响应式 3D 卡片轮播效果
编号:3D轮播

使用 jQuery + CSS 实现的4种响应式 3D 卡片轮播效果

大小 137 KB
总文件 22 个
发布 2024-07-01
更新 2024-07-01
架构 jQuery + CSS
分类 前端资源 - 切换与轮播
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款基于 CSS3 3D 炫酷变换卡片轮播的 jQuery 插件,可复制我们熟悉的 "封面流 "效果,同时还支持多种样式。Flipster不仅外观华丽,而且还拥有响应式布局、触摸友好、轻量级、可定制的特性:

    •     响应式布局,自动居中和缩放以适应所提供的区域。

    •     触摸友好,在触摸设备上在项目间轻扫,不会中断滚动效果。

    •     轻量级,Javascript 和 CSS 加起来压缩包只有 5kb(不使用 gzip 压缩包时为 13kb)。唯一依赖的是 jQuery。

    •     可定制,四种内置样式(coverflow、carousel、wheel 和 flat),提供大量选项,可按自己的喜好配置 3D 轮播效果。

3D 轮播切换插件高级配置选项

以下是用于创建 coverflow 轮播滑块的一些高级配置选项。

选择描述、默认、类型
itemContainer

它定义了 flippin' 项容器的选择器。默认值: 'ul', 类型: String |对象。

$("#carousel").flipster({
   itemContainer: 'ul',
});
itemSelector

“itemContainer”子项要翻转的选择器。默认值: 'li', 类型: String |弹出。

$("#carousel").flipster({
    itemSelector: 'li',
});
style

定义 Flipster 的样式模式。默认值:'coverflow',类型:String。
可用选项包括:coverflow |旋转木马 |平

$("#carousel").flipster({
   style: 'coverflow',
});
buttons

决定天气以根据下一个和上一个按钮插入 SVG 箭头。默认值:false,类型:Boolean。

$("#carousel").flipster({
   buttons: true,
});
buttonNext & buttonPrev

定义下一个按钮和上一个按钮的文本。默认值:分别为“Next”和“Previous”。类型:字符串。

$("#carousel").flipster({
   buttonNext: "Next",
   buttonPrev: "Previous",
});
start

定义起始项的从零开始的索引。使用“center”从中间开始。默认值:“center”,类型:Number。

$("#carousel").flipster({
   start: 'center',
});
fadeIn

定义滑动项的转换速度(以毫秒为单位)。默认值:400,类型:数字。

$("#carousel").flipster({
   fadeIn: 500,
});
loop

决定天气在到达终点后重新开始滑动物品。默认值:false,类型:Boolean。

$("#carousel").flipster({
   loop: true,
});
autoplay

This option is useful to set auto play functionality in carousel. Default: false, Type: Boolean | Number.
Pass the number value as milliseconds as interval of auto play.

$("#carousel").flipster({
   autoplay: 3000,
});
pauseOnHover

Decide weather to pause the sliding items on mouse over (hover) the Flipster Carousel. Default: true, Type: Boolean.

$("#carousel").flipster({
     pauseOnHover: true,
});
click

切换到 Flipster 轮播中单击的项目。默认值:true,类型:Boolean。

$("#carousel").flipster({
   click: true,
});
spacing

项目之间相对于每个项目的宽度的间距。默认值:-0.6,类型:数字。
可用选项包括:数字 |0 表示无间距 |要重叠的负值

$("#carousel").flipster({
   spacing: -0.6,
});

3D Coverflow 效果滑块导航选项

nav

决定在 Flipster 项目之前插入导航。默认值:false,类型:Boolean。

$("#carousel").flipster({
   nav: true,
});
keyboard

允许/禁止键盘箭头键导航 Flipster 项目。默认值:true,类型:Boolean。

$("#carousel").flipster({
   keyboard: true,
});
scrollwheel

决定天气以启用/禁用鼠标滚轮上的 Flipster 导航。默认值:true,类型:Boolean。

$("#carousel").flipster({
   scrollwheel: true,
});
touch

在触摸设备上启用/禁用滑动导航。默认值:true,类型:Boolean。

$("#carousel").flipster({
    touch: true,
});
onItemSwitch

在项目切换时触发自定义功能。默认值:false,类型:函数。
收到的参数:[currentItem, previousItem]

$("#carousel").flipster({
    onItemSwitch: function{
	   // Code to execute 
	}
});

模板目录结构

    最新资源

    新拟态JS音乐播放器,凹凸按钮与可拖动进度条的播放组件

    拟物播放器

    新拟态JS音乐播放器,凹凸按钮与可拖动进度条的播放组件
    鼠标感应摆动树特效,随指针推开并回弹的 Canvas 粒子树

    低多边形树

    鼠标感应摆动树特效,随指针推开并回弹的 Canvas 粒子树
    商业咨询 HTML 响应式建站模板,财务顾问与企业管理咨询网页模板

    阿维诺

    商业咨询 HTML 响应式建站模板,财务顾问与企业管理咨询网页模板
    AI SaaS HTML 响应式建站模板,人工智能产品订阅与技术服务网页模板

    智奥

    AI SaaS HTML 响应式建站模板,人工智能产品订阅与技术服务网页模板
    音频可视化网格地形特效,随音乐起伏的 Canvas 三维山脉粒子

    音频可视化

    音频可视化网格地形特效,随音乐起伏的 Canvas 三维山脉粒子
    山地、海滨与城市三种度假场景酒店 HTML 建站模板,山景度假村客房预订响应式网页模板

    宿悦

    山地、海滨与城市三种度假场景酒店 HTML 建站模板,山景度假村客房预订响应式网页模板