当前位置:主页 > jQuery库 > 幻灯片 / 轮播图 >

jQuery Flipster旋转木马的3D效果滑块 - jquery-flipster
栏目分类:幻灯片 / 轮播图   发布日期:2021-08-17   浏览次数:

Flipster 是一个多用途的 jQuery 插件,带有 3 种内置(coverflow | carousel | flat)模式/样式。它允许您使用 jQuery Flipster 插件创建支持触摸的 3D Coverflow 效果滑块。它支持鼠标滚轮滚动、键盘箭头键和触摸滑动来导航轮播项目。


依赖:jQuery 1.3.1或最新版本


如何制作 3D Coverflow 效果滑块


1. 将 jQuery 和Flipster Slider的 CSS 和 JavaScript 文件加载到 HTML 文档中。

<!-- jQuery -->
<script src="/uploads/allimg/210817/15052014I-0.jpg"></script>
<!-- Flipster CSS -->
<link rel="stylesheet" href="dist/jquery.flipster.min.css">
<!-- Flipster Js -->
<script src="dist/jquery.flipster.min.js"></script>

2.如下为coverflow滑块创建标记结构,并在其中添加图像链接。

<div id="carousel">
        <ul class="flip-items">
            <li data-flip-title="Red">
                <img src="img/text1.gif">
            </li>
            <li data-flip-title="Razzmatazz" data-flip-category="Purples">
                <img src="img/text2.gif">
             </li>
            <li data-flip-title="Deep Lilac" data-flip-category="Purples">
                <img src="img/text3.gif">
            </li>
            <li data-flip-title="Daisy Bush" data-flip-category="Purples">
                <img src="img/text4.gif">
            </li>
            <li data-flip-title="Cerulean Blue" data-flip-category="Blues">
                <img src="img/text5.gif">
            </li>
            <li data-flip-title="Dodger Blue" data-flip-category="Blues">
                <img src="img/text6.gif">
            </li>
            <li data-flip-title="Cyan" data-flip-category="Blues">
                <img src="img/text7.gif">
            </li>
            <li data-flip-title="Robin's Egg" data-flip-category="Blues">
                <img src="img/text8.gif">
            </li>
            <li data-flip-title="Deep Sea" data-flip-category="Greens">
                <img src="img/text9.gif">
            </li>
            <li data-flip-title="Apple" data-flip-category="Greens">
                <img src="img/text10.gif">
            </li>
            <li data-flip-title="Pistachio" data-flip-category="Greens">
                <img src="img/text11.gif">
            </li>
            <li data-flip-title="Pear" data-flip-category="Greens">
                <img src="img/text12.gif">
            </li>
            <li data-flip-title="Bright Sun" data-flip-category="Yellows">
                <img src="img/text13.gif">
            </li>
            <li data-flip-title="Mikado" data-flip-category="Yellows">
                <img src="img/text14.gif">
            </li>
        </ul>
</div>

3. 最后,使用以下语法/设置在 jQuery 文档就绪函数中调用插件。

$(document).ready(function(){
$("#carousel").flipster({
        style: 'carousel',
        spacing: -0.5,
        nav: true,
        buttons:   true,
   });
});

Flipster Slider 的高级配置选项

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

选项描述、默认、类型
itemContainer

它定义了翻转项目容器的选择器。默认值:‘ul’, 类型: String | Object.

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

用于要翻转的“itemContainer”子项的选择器。默认值‘li’, 类型: String | Oject.

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

定义 Flipster 的样式模式。默认值:‘coverflow’, 类型: String.
可用选项有: coverflow | carousel | flat

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

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

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

定义下一个和上一个按钮的文本。默认值: ‘Next’ 和‘Previous’. 类型: String.

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

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

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

以毫秒为单位定义滑动项的过渡速度。默认值: 400, 类型: Number.

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

决定天气在到达结束后再次开始滑动项目。默认值: false, 类型: Boolean.

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

此选项可用于在轮播中设置自动播放功能。默认值: false, 类型: Boolean | Number.
以毫秒为单位传递数值作为自动播放的间隔。

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

决定天气以暂停鼠标悬停在 Flipster Carousel 上的滑动项目。默认值: true, 类型: Boolean.

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

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

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

项目之间相对于每个项目宽度的空间。默认值: -0.6, 类型: Number.
可用选项有: number | 0 for no spacing | negative values to overlap

$("#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, 类型: function.
收到的参数: [currentItem, previousItem]

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


官方网站:https://github.com/drien/jquery-flipster

上一篇:没有了
下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库