README

这是一个基于 jssor/jquery-slider 的分支，增加了 SliderWidget 和 SliderAsset 以支持 yii 框架

安装

安装此扩展的首选方式是通过 composer。

运行

$ php composer.phar require "claudejanz/query-slider": "dev-master"

或将

"claudejanz/query-slider": "dev-master"

添加到您的 composer.json 文件的 require 部分。

使用方法

use claudejanz\jquerySlider\widgets\SliderWidget;
use yii\web\JsExpression;

SliderWidget::begin([
    'responsive' => true,
    'options'=>['style'=>'position: relative; top: 0px; left: 0px; width: 600px; height: 300px;'],
    'pluginOptions' => [
        '$AutoPlay' => true,
        '$AutoPlayInterval' => 6000,
        '$SlideDuration' => 800,
        '$SlideshowOptions' => [
            '$Class' => new JsExpression('$JssorSlideshowRunner$'),
            '$Transitions' => [
                ['$Duration' => 700, '$Opacity' => 2, '$Brother' => ['$Duration' => 1000, '$Opacity' => 2]]
            ]
        ]
    ]
]);
echo '<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
                    <div><img u="image" src="images/01.jpg" /></div>
                    <div><img u="image" src="images/02.jpg" /></div>
                </div>';
SliderWidget::end();

免费的 jQuery 滑块/轮播图/幻灯片

概述

您可以从 jssor 滑块中获得什么？

图片滑块、内容滑块、淡入淡出幻灯片、缩略图滑块、嵌套滑块、轮播图滑块、滑块集群、全宽滑块、网格滑块、列表滑块、垂直滑块、图片画廊、横幅滑块、横幅旋转器、视频画廊、瓷砖菜单滑块

为什么选择 jssor 滑块？

轻量级：最小 17KB 代码片段

高性能：低 CPU 使用率下的平滑动画

可靠：跨浏览器支持（IE6+、Chrome 3+、Firefox 2+、Safari 3.1+、Opera 10+）

灵活：众多选项和 API 接口

免费设计：易于适应皮肤，皮肤设计和 JS 开发分离

特性

jQuery 插件和 No-jQuery 版本均可用

jQuery 插件滑块和 No-jQuery 版本滑块几乎相同，两者都是用于图片滑块、内容滑块。幻灯片和字幕滑块动画两种版本都有。

jQuery 开发者可以从 jQuery JS 库中获益。No-jQuery 版本是不使用 jQuery 的滑块。非 jQuery 开发者可以从轻量级的可剪贴代码片段中获益，这适用于 eBay 列表、博客文章或自由嵌入到任何网页中。

触摸 + 拖动导航

在触摸设备（如三星手机、iPhone、iPad、HTC、BlackBerry（iOS、Android、Windows Surface））上用手指触摸并拖动滑块时，滑块将向左/右或上/下移动。

触摸时冻结幻灯片/字幕动画

如果幻灯片或字幕动画正在运行，则在用手指触摸或鼠标按下时将冻结。

触摸释放时继续或回滚幻灯片/字幕动画
实时响应，平滑缩放无延迟

如果启用了响应式功能，当浏览器窗口大小改变时，滑块大小将实时响应窗口宽度，无延迟，无动画停止。

即时交互，实时响应

在任何时候触摸、拖动或点击子弹/箭头/缩略图，无需等待动画结束，滑块将立即响应。

性能最佳的滑块

Jssor 滑块被评为最佳性能滑块之一。它是 CPU 消耗最低的滑块之一。（滑块(~1%)、带字幕的滑块(~4%)、带幻灯片的滑块(~4%)）

390+ 字幕效果/过渡

Jssor 滑块附带 390+ 令人印象深刻的字幕效果/过渡

360+ 幻灯片效果/过渡

Jssor 滑块附带 360+ 令人印象深刻的幻灯片效果/过渡

最平滑的动画引擎，性能平衡
自动检测水平/垂直拖动

Jssor 滑块自动检测拖动方向，当用户触摸并拖动滑块时，它将根据拖动方向水平或垂直移动。

最可靠的滑块

Jssor滑块是一款跨浏览器滑块，支持广泛浏览器，包括Chrome 3+、Firefox 2+、IE 6+、Safari 3.1+、Opera 10+。Jssor滑块还支持跨平台浏览器，包括iOS、Android、Windows、Windows Surface和Mac。

最可扩展的滑块

Jssor滑块是最可扩展的滑块之一。它附带30+（持续增长）的专业主题。所有UI都完全由html + css代码控制。用户可以在每个幻灯片中添加任何html代码，并且用户可以自定义'导航器'、'缩略图导航器'为任何格式。

可选缩略图、标签或子弹导航
缩略图、标签和子弹的位置可调节，可以是垂直或水平
允许缩略图导航器的触摸拖动导航
使用任何html/css代码自定义缩略图为任何格式
一页中可以有多个滑块
任何html代码都可以放置在幻灯片中
无限标题
触摸结束/鼠标抬起时回滚标题动画
所有浏览器都支持移动、淡入淡出、剪辑、缩放和旋转过渡
在一个过渡中允许组合移动、淡入淡出、剪辑、缩放和旋转
通过智能压缩引擎深度压缩javascript代码
箭头键导航，通过点击键盘左右箭头导航滑块
带有动画的html标题（390+标题过渡效果）
可调节标题动画速度
可以向幻灯片中添加静态内容
禁用拖动是可选的
可选悬停暂停的自动播放幻灯片放映
可以将滑块放置在任何地方（灯箱或任何容器中）
可选幻灯片间的间距
剪切/粘贴滑块代码片段
符合ebay要求，适用于ebay商店、ebay列表
符合blogger要求，只需复制/粘贴代码片段即可发布blogger文章

claudejanz / jquery-slider

维护者

详情

README

安装

使用方法

免费的 jQuery 滑块/轮播图/幻灯片

概述

您可以从 jssor 滑块中获得什么？

为什么选择 jssor 滑块？

特性