README

This is a fork of jssor/jquery-slider with an additionnal SliderWidget and SliderAsset for yii framework

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

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

to the require section of your composer.json file.

Usage

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();

Free jQuery Slider/Carousel/Slideshow

Overview

What you get with jssor slider?

image slider, content slider, fade slideshow, thumbnail slider, nested slider, carousel slider, slider cluster, full width slider, grid slider, list slider, vertical slider, image gallery, banner slider, banner rotator, video gallery, tiled menu slider

Why jssor slider?

Light Weight: minimum 17KB code snippet

High Performance: smooth animation with low cpu usage

Reliable: cross browser support (IE6+, Chrome 3+, Firefox 2+, Safari 3.1+, Opera 10+)

Flexible: tons of options and api interfaces

Free Design: easy to adapt skins, separate skin design and js development

Features:

both jQuery Plugin, No-jQuery Version available

Query plugin slider and No-jQuery version slider work almost the same, both are for image slider, content slider. Slideshow and caption slide animation are all available for both version.

jQuery developers benifit on jQuery js library. No-jQuery version is slider without jQuery. Non-jQuery developers benifite on light weight cut/paste code snipet, which is eligible for eBay listing, blogger post, or embed into any web page freely.

touch + drag navigation

When touch and drag the slider with finger on a touch device like Samsung mobile, iPhone, iPad, HTC, Blackberry (iOS, Android, Windows Surface), the slider will move left/right or up/down.

freeze slideshow/caption animation when touch

If slideshow or caption animation is running, it will freeze when touch by finger or mouse down.

continue or rollback slideshow/caption animation when touch is released
responsive at realtime, scale smoothly with no delay

If responsive feature is enabled, when window of browser resize, the slider size will respond to window width at real time with no delay, no stop of animation.

instant interaction, action at realtime

Touch, drag or click bullets/arrows/thumbnails anytime, no need to wait for the end of animation, slider will act instantly.

best performance slider

Jssor slider is announced as one of the best performance sliders. It is one of the lowest CPU comsuming slider. slider (~1%), slider with caption (~4%), slider with slideshow (~4%)

390+ caption effects/transitions

Jssor slider comes with 390+ impressive caption effects/transitions

360+ slideshow effects/transitions

Jssor slider comes with 360+ impressive slideshow effects/transitions

most smooth animation engine with performance balance
horizontal/vertical drag by auto detect

Jssor slider auto detect drag orientation, when an user touches and drag the slider, it will move horizontal or vertical according to the drag orientation.

most reliable slider

Jssor slider is cross browser slider, it supports wide range of browsers, Chrome 3+, Firefox 2+, IE 6+, Safari 3.1+, Opera 10+. Jssor slider is also cross plat form browser, iOS, Android, Windows, Windows Surface and Mac are all supported.

most scalable slider

Jssor slider is one of most scalable slider. It comes with 30+ (continuous growing) professional themes. All UI is fully under control by html + css code. User can add any html code to each slide, and user can customize 'navigator', 'thumbnail navigator' to any format.

optional thumbnails, tabs or bullets navigation
position of thumbnails, tabs and bullets are adjustable, can be vertical or horizontal
touch drag navigation for thumbnail navigator is allowed
use any html/css code to customize thumbnail to anyformat
multiple sliders in one page
any html code can be placed inside slide
unlimited captions
rollback caption animation when touch end/mouse up
move, fade, clip, zoom and rotation transitions are all supported for all browsers
composite move, fade, clip, zoom and rotation in one transition is allowed
javascript code deep compression by smart compression engine
arrow key navitation, navigate slider by click keyboard arrow left/right
html caption with animation (390+ caption transitions)
caption animation speed adjustable
can add static content to slide
disable drag is optional
auto play slideshow with optional pause on hover
can put slider anywhere (light box, or any container)
optional spacing between slides
cut/paste slider code snippet
ebay friendly, eligible for ebay store, ebay listing
blogger friendly, just copy/paste code snippet to publish blogger post

claudejanz / jquery-slider

Maintainers

Details