claudejanz/jquery-slider

There is no license information available for the latest version (dev-master) of this package.

forked from jssor/jquery-slider add composer file and yii2 widgets

Installs: 262

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 3

Forks: 755

Language:JavaScript

dev-master 2014-08-11 10:00 UTC

This package is auto-updated.

Last update: 2024-03-11 17:24:17 UTC


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

  1. 30+ Slider/Carouel/Slideshow/Gallery/Banner Demos
  2. Development Documentation
  3. Support: Ask question on StackOverflow

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