├── .editorconfig ├── .gitignore ├── .jshintrc ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── contributing.md ├── demo ├── img │ ├── cS-1.jpg │ ├── cS-10.jpg │ ├── cS-11.jpg │ ├── cS-12.jpg │ ├── cS-13.jpg │ ├── cS-14.jpg │ ├── cS-15.jpg │ ├── cS-2.jpg │ ├── cS-3.jpg │ ├── cS-4.jpg │ ├── cS-5.jpg │ ├── cS-6.jpg │ ├── cS-7.jpg │ ├── cS-8.jpg │ ├── cS-9.jpg │ └── thumb │ │ ├── cS-1.jpg │ │ ├── cS-10.jpg │ │ ├── cS-11.jpg │ │ ├── cS-12.jpg │ │ ├── cS-13.jpg │ │ ├── cS-14.jpg │ │ ├── cS-15.jpg │ │ ├── cS-16.jpg │ │ ├── cS-2.jpg │ │ ├── cS-3.jpg │ │ ├── cS-4.jpg │ │ ├── cS-5.jpg │ │ ├── cS-6.jpg │ │ ├── cS-7.jpg │ │ ├── cS-8.jpg │ │ └── cS-9.jpg └── index.html ├── dist ├── css │ ├── lightslider.css │ └── lightslider.min.css ├── img │ └── controls.png └── js │ ├── lightslider.js │ └── lightslider.min.js ├── lightslider.jquery.json ├── package.json ├── src ├── css │ └── lightslider.css ├── img │ └── controls.png └── js │ ├── .jshintrc │ └── lightslider.js └── test ├── .jshintrc ├── lightslider.html └── lightslider_test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [package.json] 12 | indent_style = space 13 | indent_size = 4 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /bower_components/ 3 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 4, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "undef": true, 16 | "unused": true, 17 | "strict": true 18 | } 19 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | before_script: 5 | - 'npm install -g bower grunt-cli' 6 | - 'bower install' -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | module.exports = function (grunt) { 3 | // Load all grunt tasks 4 | require('load-grunt-tasks')(grunt); 5 | // Show elapsed time at the end 6 | require('time-grunt')(grunt); 7 | 8 | // Project configuration. 9 | grunt.initConfig({ 10 | // Metadata. 11 | pkg: grunt.file.readJSON('package.json'), 12 | banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + 13 | '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 14 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 15 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 16 | ' Licensed MIT */\n', 17 | // Task configuration. 18 | clean: { 19 | files: ['dist'] 20 | }, 21 | concat: { 22 | options: { 23 | banner: '<%= banner %>', 24 | }, 25 | basic: { 26 | src: ['src/js/<%= pkg.name %>.js'], 27 | dest: 'dist/js/<%= pkg.name %>.js' 28 | }, 29 | extras: { 30 | src: ['src/css/<%= pkg.name %>.css'], 31 | dest: 'dist/css/<%= pkg.name %>.css' 32 | } 33 | }, 34 | uglify: { 35 | options: { 36 | banner: '<%= banner %>' 37 | }, 38 | dist: { 39 | src: 'src/js/<%= pkg.name %>.js', 40 | dest: 'dist/js/<%= pkg.name %>.min.js' 41 | } 42 | }, 43 | cssmin: { 44 | target: { 45 | files: [{ 46 | expand: true, 47 | cwd: 'src/css', 48 | src: ['*.css', '!*.min.css'], 49 | dest: 'dist/css', 50 | ext: '.min.css' 51 | }] 52 | } 53 | }, 54 | copy: { 55 | main: { 56 | expand: true, 57 | cwd: 'src/img/', 58 | src: ['**'], 59 | dest: 'dist/img/' 60 | } 61 | }, 62 | qunit: { 63 | all: { 64 | options: { 65 | urls: ['http://localhost:9000/test/<%= pkg.name %>.html'] 66 | } 67 | } 68 | }, 69 | jshint: { 70 | options: { 71 | reporter: require('jshint-stylish') 72 | }, 73 | gruntfile: { 74 | options: { 75 | jshintrc: '.jshintrc' 76 | }, 77 | src: 'Gruntfile.js' 78 | }, 79 | src: { 80 | options: { 81 | jshintrc: 'src/js/.jshintrc' 82 | }, 83 | src: ['src/**/*.js'] 84 | }, 85 | test: { 86 | options: { 87 | jshintrc: 'test/.jshintrc' 88 | }, 89 | src: ['test/**/*.js'] 90 | } 91 | }, 92 | /*sass: { 93 | dist: { 94 | options: { // Target options 95 | style: 'expanded' 96 | }, 97 | files: { 98 | 'src/css/lightgallery.css': 'src/sass/lightgallery.scss' 99 | } 100 | } 101 | },*/ 102 | watch: { 103 | gruntfile: { 104 | files: '<%= jshint.gruntfile.src %>', 105 | tasks: ['jshint:gruntfile'] 106 | }, 107 | src: { 108 | files: '<%= jshint.src.src %>', 109 | tasks: ['jshint:src', 'qunit'] 110 | }, 111 | test: { 112 | files: '<%= jshint.test.src %>', 113 | tasks: ['jshint:test', 'qunit'] 114 | }, 115 | css: { 116 | files: 'src/**/*.scss' 117 | //tasks: ['sass'] 118 | } 119 | }, 120 | connect: { 121 | server: { 122 | options: { 123 | hostname: '0.0.0.0', 124 | port: 9000 125 | } 126 | } 127 | } 128 | }); 129 | 130 | // Default task. 131 | grunt.registerTask('default', ['jshint', 'connect', 'qunit', 'clean', 'concat', 'uglify', /*'sass',*/ 'cssmin', 'copy']); 132 | grunt.registerTask('server', function () { 133 | grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 134 | grunt.task.run(['serve']); 135 | }); 136 | grunt.registerTask('serve', ['connect', 'watch']); 137 | grunt.registerTask('test', ['jshint', 'connect', 'qunit']); 138 | }; 139 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Sachin N 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![license](https://img.shields.io/npm/l/lightslider.svg) 2 | ![travis](https://travis-ci.org/sachinchoolur/lightslider.svg?branch=master) 3 | ![bower](https://img.shields.io/bower/v/lightslider.svg) 4 | ![npm](https://img.shields.io/npm/v/lightslider.svg) 5 | 6 | jQuery lightSlider 7 | ============= 8 | 9 | 10 | Demo 11 | ---------------- 12 | [JQuery lightSlider demo](http://sachinchoolur.github.io/lightslider/) 13 | 14 | Description 15 | ---------------- 16 | JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation 17 | 18 | Main Features 19 | ---------------- 20 | + Fully responsive - will adapt to any device. 21 | + Separate settings per breakpoint. 22 | + Gallery mode to create an image slideshow with thumbnails 23 | + Supports swipe and mouseDrag 24 | + Add or remove slides dynamically. 25 | + Small file size, fully themed, simple to implement. 26 | + CSS transitions with jQuery fallback. 27 | + Full callback API and public methods. 28 | + Auto play and infinite loop to create a content carousel. 29 | + Keyboard, arrows and dots navigation. 30 | + Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone. 31 | + Slide and Fade Effects. 32 | + Auto width, Vertical Slide, Adaptiveheight, Rtl support... 33 | + Multiple instances on one page. 34 | + Slide anything (youtube, vimeo , google map ...) 35 | 36 | 37 | 38 | How to use lightSlider? 39 | -------------------- 40 | 41 | ### Bower 42 | 43 | You can Install lightslider using the [Bower](http://bower.io) package manager. 44 | 45 | ```sh 46 | $ bower install lightslider 47 | ``` 48 | 49 | ### npm 50 | 51 | You can also find lightslider on [npm](http://npmjs.org). 52 | 53 | ```sh 54 | $ npm install lightslider 55 | ``` 56 | 57 | ### The code ### 58 | add the Following code to the <head> of your document. 59 | ```html 60 | 61 | 62 | 63 | // Do not include both lightslider.js and lightslider.min.js 64 | ``` 65 | ### HTML Structure ### 66 | ```html 67 | 78 | ``` 79 | ### Call lightSlider! ### 80 | ```html 81 | 86 | ``` 87 | ### Play with settings ### 88 | ```html 89 | 145 | ``` 146 | ### Public methods ### 147 | ```html 148 | 161 | ``` 162 | ### Report an Issue ### 163 | If you think you might have found a bug or if you have a feature suggestion please use github [issue tracker](https://github.com/sachinchoolur/lightslider/issues/new). Also please try to add a jsfiddle that demonstrates your problem 164 | 165 | If you need any help with implementing lightslider in your project or if have you any personal support requests i requset you to please use [stackoverflow](https://stackoverflow.com/) instead of github issue tracker 166 | 167 | 168 | If you like lightSlider support me by staring this repository or tweet about this project. 169 | [@sachinchoolur](https://twitter.com/sachinchoolur) 170 | 171 | #### [guidelines for contributors](https://github.com/sachinchoolur/lightslider/blob/master/contributing.md) 172 | 173 | #### MIT © [Sachin](https://twitter.com/sachinchoolur) 174 | 175 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lightslider", 3 | "version": "1.1.6", 4 | "homepage": "https://github.com/sachinchoolur/lightslider", 5 | "authors": [ 6 | "Sachin N " 7 | ], 8 | "description": "jQuery lightSlider is a lightweight responsive content slider - carousel with animated thumbnails navigation", 9 | "main": [ 10 | "dist/js/lightslider.min.js", 11 | "dist/css/lightslider.min.css", 12 | "dist/img/controls.png" 13 | ], 14 | "keywords": [ 15 | "slider", 16 | "contentslider", 17 | "textslider", 18 | "slideshow", 19 | "gallery", 20 | "responsive", 21 | "carousel", 22 | "animation", 23 | "jQuery", 24 | "video", 25 | "image", 26 | "CSS3", 27 | "touch", 28 | "swipe", 29 | "thumbnail" 30 | ], 31 | "license": "MLT", 32 | "ignore": [ 33 | "demo", 34 | "test", 35 | "**/.*", 36 | "contributing.md", 37 | "Gruntfile.js", 38 | "README.md" 39 | ], 40 | "devDependencies": { 41 | "qunit": "~1.12.0", 42 | "jquery": "~1.7.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Important notes 4 | Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory! 5 | 6 | ### Code style 7 | Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** 8 | 9 | ### PhantomJS 10 | While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers. 11 | 12 | ## Modifying the code 13 | First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. 14 | 15 | Test that Grunt's CLI and Bower are installed by running `grunt --version` and `bower --version`. If the commands aren't found, run `npm install -g grunt-cli bower`. For more information about installing the tools, see the [getting started with Grunt guide](http://gruntjs.com/getting-started) or [bower.io](http://bower.io/) respectively. 16 | 17 | 1. Fork and clone the repo. 18 | 1. Run `npm install` to install all build dependencies (including Grunt). 19 | 1. Run `bower install` to install the front-end dependencies. 20 | 1. Run `grunt` to grunt this project. 21 | 22 | Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. 23 | 24 | ## Submitting pull requests 25 | 26 | 1. Create a new branch, please don't work in your `master` branch directly. 27 | 1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail. 28 | 1. Fix stuff. 29 | 1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done. 30 | 1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere. 31 | 1. Update the documentation to reflect any changes. 32 | 1. Push to your fork and submit a pull request. 33 | -------------------------------------------------------------------------------- /demo/img/cS-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-1.jpg -------------------------------------------------------------------------------- /demo/img/cS-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-10.jpg -------------------------------------------------------------------------------- /demo/img/cS-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-11.jpg -------------------------------------------------------------------------------- /demo/img/cS-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-12.jpg -------------------------------------------------------------------------------- /demo/img/cS-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-13.jpg -------------------------------------------------------------------------------- /demo/img/cS-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-14.jpg -------------------------------------------------------------------------------- /demo/img/cS-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-15.jpg -------------------------------------------------------------------------------- /demo/img/cS-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-2.jpg -------------------------------------------------------------------------------- /demo/img/cS-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-3.jpg -------------------------------------------------------------------------------- /demo/img/cS-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-4.jpg -------------------------------------------------------------------------------- /demo/img/cS-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-5.jpg -------------------------------------------------------------------------------- /demo/img/cS-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-6.jpg -------------------------------------------------------------------------------- /demo/img/cS-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-7.jpg -------------------------------------------------------------------------------- /demo/img/cS-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-8.jpg -------------------------------------------------------------------------------- /demo/img/cS-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/cS-9.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-1.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-10.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-11.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-12.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-13.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-14.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-15.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-16.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-2.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-3.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-4.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-5.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-6.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-7.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-8.jpg -------------------------------------------------------------------------------- /demo/img/thumb/cS-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/demo/img/thumb/cS-9.jpg -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | lightSlider Demo 5 | 6 | 7 | 8 | 9 | 31 | 32 | 33 | 53 | 54 | 55 |
56 |
57 |
58 | 105 |
106 |
107 |
108 |
    109 |
  • 110 |

    1

    111 |
    • 112 |
  • 113 |

    2

    114 |
    • 115 |
  • 116 |

    3

    117 |
    • 118 |
  • 119 |

    4

    120 |
    • 121 |
  • 122 |

    5

    123 |
    • 124 |
  • 125 |

    6

    126 |
    • 127 |
128 |
129 | 130 |
131 | 132 | -------------------------------------------------------------------------------- /dist/css/lightslider.css: -------------------------------------------------------------------------------- 1 | /*! lightslider - v1.1.6 - 2016-10-25 2 | * https://github.com/sachinchoolur/lightslider 3 | * Copyright (c) 2016 Sachin N; Licensed MIT */ 4 | /*! lightslider - v1.1.3 - 2015-04-14 5 | * https://github.com/sachinchoolur/lightslider 6 | * Copyright (c) 2015 Sachin N; Licensed MIT */ 7 | /** /!!! core css Should not edit !!!/**/ 8 | 9 | .lSSlideOuter { 10 | overflow: hidden; 11 | -webkit-touch-callout: none; 12 | -webkit-user-select: none; 13 | -khtml-user-select: none; 14 | -moz-user-select: none; 15 | -ms-user-select: none; 16 | user-select: none 17 | } 18 | .lightSlider:before, .lightSlider:after { 19 | content: " "; 20 | display: table; 21 | } 22 | .lightSlider { 23 | overflow: hidden; 24 | margin: 0; 25 | } 26 | .lSSlideWrapper { 27 | max-width: 100%; 28 | overflow: hidden; 29 | position: relative; 30 | } 31 | .lSSlideWrapper > .lightSlider:after { 32 | clear: both; 33 | } 34 | .lSSlideWrapper .lSSlide { 35 | -webkit-transform: translate(0px, 0px); 36 | -ms-transform: translate(0px, 0px); 37 | transform: translate(0px, 0px); 38 | -webkit-transition: all 1s; 39 | -webkit-transition-property: -webkit-transform,height; 40 | -moz-transition-property: -moz-transform,height; 41 | transition-property: transform,height; 42 | -webkit-transition-duration: inherit !important; 43 | transition-duration: inherit !important; 44 | -webkit-transition-timing-function: inherit !important; 45 | transition-timing-function: inherit !important; 46 | } 47 | .lSSlideWrapper .lSFade { 48 | position: relative; 49 | } 50 | .lSSlideWrapper .lSFade > * { 51 | position: absolute !important; 52 | top: 0; 53 | left: 0; 54 | z-index: 9; 55 | margin-right: 0; 56 | width: 100%; 57 | } 58 | .lSSlideWrapper.usingCss .lSFade > * { 59 | opacity: 0; 60 | -webkit-transition-delay: 0s; 61 | transition-delay: 0s; 62 | -webkit-transition-duration: inherit !important; 63 | transition-duration: inherit !important; 64 | -webkit-transition-property: opacity; 65 | transition-property: opacity; 66 | -webkit-transition-timing-function: inherit !important; 67 | transition-timing-function: inherit !important; 68 | } 69 | .lSSlideWrapper .lSFade > *.active { 70 | z-index: 10; 71 | } 72 | .lSSlideWrapper.usingCss .lSFade > *.active { 73 | opacity: 1; 74 | } 75 | /** /!!! End of core css Should not edit !!!/**/ 76 | 77 | /* Pager */ 78 | .lSSlideOuter .lSPager.lSpg { 79 | margin: 10px 0 0; 80 | padding: 0; 81 | text-align: center; 82 | } 83 | .lSSlideOuter .lSPager.lSpg > li { 84 | cursor: pointer; 85 | display: inline-block; 86 | padding: 0 5px; 87 | } 88 | .lSSlideOuter .lSPager.lSpg > li a { 89 | background-color: #222222; 90 | border-radius: 30px; 91 | display: inline-block; 92 | height: 8px; 93 | overflow: hidden; 94 | text-indent: -999em; 95 | width: 8px; 96 | position: relative; 97 | z-index: 99; 98 | -webkit-transition: all 0.5s linear 0s; 99 | transition: all 0.5s linear 0s; 100 | } 101 | .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a { 102 | background-color: #428bca; 103 | } 104 | .lSSlideOuter .media { 105 | opacity: 0.8; 106 | } 107 | .lSSlideOuter .media.active { 108 | opacity: 1; 109 | } 110 | /* End of pager */ 111 | 112 | /** Gallery */ 113 | .lSSlideOuter .lSPager.lSGallery { 114 | list-style: none outside none; 115 | padding-left: 0; 116 | margin: 0; 117 | overflow: hidden; 118 | transform: translate3d(0px, 0px, 0px); 119 | -moz-transform: translate3d(0px, 0px, 0px); 120 | -ms-transform: translate3d(0px, 0px, 0px); 121 | -webkit-transform: translate3d(0px, 0px, 0px); 122 | -o-transform: translate3d(0px, 0px, 0px); 123 | -webkit-transition-property: -webkit-transform; 124 | -moz-transition-property: -moz-transform; 125 | -webkit-touch-callout: none; 126 | -webkit-user-select: none; 127 | -khtml-user-select: none; 128 | -moz-user-select: none; 129 | -ms-user-select: none; 130 | user-select: none; 131 | } 132 | .lSSlideOuter .lSPager.lSGallery li { 133 | overflow: hidden; 134 | -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s; 135 | transition: border-radius 0.12s linear 0s 0.35s linear 0s; 136 | } 137 | .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover { 138 | border-radius: 5px; 139 | } 140 | .lSSlideOuter .lSPager.lSGallery img { 141 | display: block; 142 | height: auto; 143 | max-width: 100%; 144 | } 145 | .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after { 146 | content: " "; 147 | display: table; 148 | } 149 | .lSSlideOuter .lSPager.lSGallery:after { 150 | clear: both; 151 | } 152 | /* End of Gallery*/ 153 | 154 | /* slider actions */ 155 | .lSAction > a { 156 | width: 32px; 157 | display: block; 158 | top: 50%; 159 | height: 32px; 160 | background-image: url('../img/controls.png'); 161 | cursor: pointer; 162 | position: absolute; 163 | z-index: 99; 164 | margin-top: -16px; 165 | opacity: 0.5; 166 | -webkit-transition: opacity 0.35s linear 0s; 167 | transition: opacity 0.35s linear 0s; 168 | } 169 | .lSAction > a:hover { 170 | opacity: 1; 171 | } 172 | .lSAction > .lSPrev { 173 | background-position: 0 0; 174 | left: 10px; 175 | } 176 | .lSAction > .lSNext { 177 | background-position: -32px 0; 178 | right: 10px; 179 | } 180 | .lSAction > a.disabled { 181 | pointer-events: none; 182 | } 183 | .cS-hidden { 184 | height: 1px; 185 | opacity: 0; 186 | filter: alpha(opacity=0); 187 | overflow: hidden; 188 | } 189 | 190 | 191 | /* vertical */ 192 | .lSSlideOuter.vertical { 193 | position: relative; 194 | } 195 | .lSSlideOuter.vertical.noPager { 196 | padding-right: 0px !important; 197 | } 198 | .lSSlideOuter.vertical .lSGallery { 199 | position: absolute !important; 200 | right: 0; 201 | top: 0; 202 | } 203 | .lSSlideOuter.vertical .lightSlider > * { 204 | width: 100% !important; 205 | max-width: none !important; 206 | } 207 | 208 | /* vertical controlls */ 209 | .lSSlideOuter.vertical .lSAction > a { 210 | left: 50%; 211 | margin-left: -14px; 212 | margin-top: 0; 213 | } 214 | .lSSlideOuter.vertical .lSAction > .lSNext { 215 | background-position: 31px -31px; 216 | bottom: 10px; 217 | top: auto; 218 | } 219 | .lSSlideOuter.vertical .lSAction > .lSPrev { 220 | background-position: 0 -31px; 221 | bottom: auto; 222 | top: 10px; 223 | } 224 | /* vertical */ 225 | 226 | 227 | /* Rtl */ 228 | .lSSlideOuter.lSrtl { 229 | direction: rtl; 230 | } 231 | .lSSlideOuter .lightSlider, .lSSlideOuter .lSPager { 232 | padding-left: 0; 233 | list-style: none outside none; 234 | } 235 | .lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager { 236 | padding-right: 0; 237 | } 238 | .lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li { 239 | float: left; 240 | } 241 | .lSSlideOuter.lSrtl .lightSlider > *, .lSSlideOuter.lSrtl .lSGallery li { 242 | float: right !important; 243 | } 244 | /* Rtl */ 245 | 246 | @-webkit-keyframes rightEnd { 247 | 0% { 248 | left: 0; 249 | } 250 | 251 | 50% { 252 | left: -15px; 253 | } 254 | 255 | 100% { 256 | left: 0; 257 | } 258 | } 259 | @keyframes rightEnd { 260 | 0% { 261 | left: 0; 262 | } 263 | 264 | 50% { 265 | left: -15px; 266 | } 267 | 268 | 100% { 269 | left: 0; 270 | } 271 | } 272 | @-webkit-keyframes topEnd { 273 | 0% { 274 | top: 0; 275 | } 276 | 277 | 50% { 278 | top: -15px; 279 | } 280 | 281 | 100% { 282 | top: 0; 283 | } 284 | } 285 | @keyframes topEnd { 286 | 0% { 287 | top: 0; 288 | } 289 | 290 | 50% { 291 | top: -15px; 292 | } 293 | 294 | 100% { 295 | top: 0; 296 | } 297 | } 298 | @-webkit-keyframes leftEnd { 299 | 0% { 300 | left: 0; 301 | } 302 | 303 | 50% { 304 | left: 15px; 305 | } 306 | 307 | 100% { 308 | left: 0; 309 | } 310 | } 311 | @keyframes leftEnd { 312 | 0% { 313 | left: 0; 314 | } 315 | 316 | 50% { 317 | left: 15px; 318 | } 319 | 320 | 100% { 321 | left: 0; 322 | } 323 | } 324 | @-webkit-keyframes bottomEnd { 325 | 0% { 326 | bottom: 0; 327 | } 328 | 329 | 50% { 330 | bottom: -15px; 331 | } 332 | 333 | 100% { 334 | bottom: 0; 335 | } 336 | } 337 | @keyframes bottomEnd { 338 | 0% { 339 | bottom: 0; 340 | } 341 | 342 | 50% { 343 | bottom: -15px; 344 | } 345 | 346 | 100% { 347 | bottom: 0; 348 | } 349 | } 350 | .lSSlideOuter .rightEnd { 351 | -webkit-animation: rightEnd 0.3s; 352 | animation: rightEnd 0.3s; 353 | position: relative; 354 | } 355 | .lSSlideOuter .leftEnd { 356 | -webkit-animation: leftEnd 0.3s; 357 | animation: leftEnd 0.3s; 358 | position: relative; 359 | } 360 | .lSSlideOuter.vertical .rightEnd { 361 | -webkit-animation: topEnd 0.3s; 362 | animation: topEnd 0.3s; 363 | position: relative; 364 | } 365 | .lSSlideOuter.vertical .leftEnd { 366 | -webkit-animation: bottomEnd 0.3s; 367 | animation: bottomEnd 0.3s; 368 | position: relative; 369 | } 370 | .lSSlideOuter.lSrtl .rightEnd { 371 | -webkit-animation: leftEnd 0.3s; 372 | animation: leftEnd 0.3s; 373 | position: relative; 374 | } 375 | .lSSlideOuter.lSrtl .leftEnd { 376 | -webkit-animation: rightEnd 0.3s; 377 | animation: rightEnd 0.3s; 378 | position: relative; 379 | } 380 | /*/ GRab cursor */ 381 | .lightSlider.lsGrab > * { 382 | cursor: -webkit-grab; 383 | cursor: -moz-grab; 384 | cursor: -o-grab; 385 | cursor: -ms-grab; 386 | cursor: grab; 387 | } 388 | .lightSlider.lsGrabbing > * { 389 | cursor: move; 390 | cursor: -webkit-grabbing; 391 | cursor: -moz-grabbing; 392 | cursor: -o-grabbing; 393 | cursor: -ms-grabbing; 394 | cursor: grabbing; 395 | } -------------------------------------------------------------------------------- /dist/css/lightslider.min.css: -------------------------------------------------------------------------------- 1 | /*! lightslider - v1.1.3 - 2015-04-14 2 | * https://github.com/sachinchoolur/lightslider 3 | * Copyright (c) 2015 Sachin N; Licensed MIT */.lSSlideWrapper,.lSSlideWrapper .lSFade{position:relative}.lSSlideWrapper .lSSlide,.lSSlideWrapper.usingCss .lSFade>*{-webkit-transition-timing-function:inherit!important;transition-timing-function:inherit!important;-webkit-transition-duration:inherit!important;transition-duration:inherit!important}.lSSlideOuter,.lSSlideOuter .lSPager.lSGallery{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-user-select:none}.lSSlideOuter .lSPager.lSGallery:after,.lSSlideWrapper>.lightSlider:after{clear:both}.lSSlideOuter{overflow:hidden;user-select:none}.lightSlider:after,.lightSlider:before{content:" ";display:table}.lightSlider{overflow:hidden;margin:0}.lSSlideWrapper{max-width:100%;overflow:hidden}.lSSlideWrapper .lSSlide{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all 1s;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform,height;transition-property:transform,height}.lSSlideWrapper .lSFade>*{position:absolute!important;top:0;left:0;z-index:9;margin-right:0;width:100%}.lSSlideWrapper.usingCss .lSFade>*{opacity:0;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-property:opacity;transition-property:opacity}.lSSlideWrapper .lSFade>.active{z-index:10}.lSSlideWrapper.usingCss .lSFade>.active{opacity:1}.lSSlideOuter .lSPager.lSpg{margin:10px 0 0;padding:0;text-align:center}.lSSlideOuter .lSPager.lSpg>li{cursor:pointer;display:inline-block;padding:0 5px}.lSSlideOuter .lSPager.lSpg>li a{background-color:#222;border-radius:30px;display:inline-block;height:8px;overflow:hidden;text-indent:-999em;width:8px;position:relative;z-index:99;-webkit-transition:all .5s linear 0s;transition:all .5s linear 0s}.lSSlideOuter .lSPager.lSpg>li.active a,.lSSlideOuter .lSPager.lSpg>li:hover a{background-color:#428bca}.lSSlideOuter .media{opacity:.8}.lSSlideOuter .media.active{opacity:1}.lSSlideOuter .lSPager.lSGallery{list-style:none;padding-left:0;margin:0;overflow:hidden;transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;user-select:none}.lSSlideOuter .lSPager.lSGallery li{overflow:hidden;-webkit-transition:border-radius .12s linear 0s .35s linear 0s;transition:border-radius .12s linear 0s .35s linear 0s}.lSSlideOuter .lSPager.lSGallery li.active,.lSSlideOuter .lSPager.lSGallery li:hover{border-radius:5px}.lSSlideOuter .lSPager.lSGallery img{display:block;height:auto;max-width:100%}.lSSlideOuter .lSPager.lSGallery:after,.lSSlideOuter .lSPager.lSGallery:before{content:" ";display:table}.lSAction>a{width:32px;display:block;top:50%;height:32px;background-image:url(../img/controls.png);cursor:pointer;position:absolute;z-index:99;margin-top:-16px;opacity:.5;-webkit-transition:opacity .35s linear 0s;transition:opacity .35s linear 0s}.lSAction>a:hover{opacity:1}.lSAction>.lSPrev{background-position:0 0;left:10px}.lSAction>.lSNext{background-position:-32px 0;right:10px}.lSAction>a.disabled{pointer-events:none}.cS-hidden{height:1px;opacity:0;filter:alpha(opacity=0);overflow:hidden}.lSSlideOuter.vertical{position:relative}.lSSlideOuter.vertical.noPager{padding-right:0!important}.lSSlideOuter.vertical .lSGallery{position:absolute!important;right:0;top:0}.lSSlideOuter.vertical .lightSlider>*{width:100%!important;max-width:none!important}.lSSlideOuter.vertical .lSAction>a{left:50%;margin-left:-14px;margin-top:0}.lSSlideOuter.vertical .lSAction>.lSNext{background-position:31px -31px;bottom:10px;top:auto}.lSSlideOuter.vertical .lSAction>.lSPrev{background-position:0 -31px;bottom:auto;top:10px}.lSSlideOuter.lSrtl{direction:rtl}.lSSlideOuter .lSPager,.lSSlideOuter .lightSlider{padding-left:0;list-style:none}.lSSlideOuter.lSrtl .lSPager,.lSSlideOuter.lSrtl .lightSlider{padding-right:0}.lSSlideOuter .lSGallery li,.lSSlideOuter .lightSlider>*{float:left}.lSSlideOuter.lSrtl .lSGallery li,.lSSlideOuter.lSrtl .lightSlider>*{float:right!important}@-webkit-keyframes rightEnd{0%,100%{left:0}50%{left:-15px}}@keyframes rightEnd{0%,100%{left:0}50%{left:-15px}}@-webkit-keyframes topEnd{0%,100%{top:0}50%{top:-15px}}@keyframes topEnd{0%,100%{top:0}50%{top:-15px}}@-webkit-keyframes leftEnd{0%,100%{left:0}50%{left:15px}}@keyframes leftEnd{0%,100%{left:0}50%{left:15px}}@-webkit-keyframes bottomEnd{0%,100%{bottom:0}50%{bottom:-15px}}@keyframes bottomEnd{0%,100%{bottom:0}50%{bottom:-15px}}.lSSlideOuter .rightEnd{-webkit-animation:rightEnd .3s;animation:rightEnd .3s;position:relative}.lSSlideOuter .leftEnd{-webkit-animation:leftEnd .3s;animation:leftEnd .3s;position:relative}.lSSlideOuter.vertical .rightEnd{-webkit-animation:topEnd .3s;animation:topEnd .3s;position:relative}.lSSlideOuter.vertical .leftEnd{-webkit-animation:bottomEnd .3s;animation:bottomEnd .3s;position:relative}.lSSlideOuter.lSrtl .rightEnd{-webkit-animation:leftEnd .3s;animation:leftEnd .3s;position:relative}.lSSlideOuter.lSrtl .leftEnd{-webkit-animation:rightEnd .3s;animation:rightEnd .3s;position:relative}.lightSlider.lsGrab>*{cursor:-webkit-grab;cursor:-moz-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.lightSlider.lsGrabbing>*{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing} -------------------------------------------------------------------------------- /dist/img/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/dist/img/controls.png -------------------------------------------------------------------------------- /dist/js/lightslider.js: -------------------------------------------------------------------------------- 1 | /*! lightslider - v1.1.6 - 2016-10-25 2 | * https://github.com/sachinchoolur/lightslider 3 | * Copyright (c) 2016 Sachin N; Licensed MIT */ 4 | (function ($, undefined) { 5 | 'use strict'; 6 | var defaults = { 7 | item: 3, 8 | autoWidth: false, 9 | slideMove: 1, 10 | slideMargin: 10, 11 | addClass: '', 12 | mode: 'slide', 13 | useCSS: true, 14 | cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)', 15 | easing: 'linear', //'for jquery animation',// 16 | speed: 400, //ms' 17 | auto: false, 18 | pauseOnHover: false, 19 | loop: false, 20 | slideEndAnimation: true, 21 | pause: 2000, 22 | keyPress: false, 23 | controls: true, 24 | prevHtml: '', 25 | nextHtml: '', 26 | rtl: false, 27 | adaptiveHeight: false, 28 | vertical: false, 29 | verticalHeight: 500, 30 | vThumbWidth: 100, 31 | thumbItem: 10, 32 | pager: true, 33 | gallery: false, 34 | galleryMargin: 5, 35 | thumbMargin: 5, 36 | currentPagerPosition: 'middle', 37 | enableTouch: true, 38 | enableDrag: true, 39 | freeMove: true, 40 | swipeThreshold: 40, 41 | responsive: [], 42 | /* jshint ignore:start */ 43 | onBeforeStart: function ($el) {}, 44 | onSliderLoad: function ($el) {}, 45 | onBeforeSlide: function ($el, scene) {}, 46 | onAfterSlide: function ($el, scene) {}, 47 | onBeforeNextSlide: function ($el, scene) {}, 48 | onBeforePrevSlide: function ($el, scene) {} 49 | /* jshint ignore:end */ 50 | }; 51 | $.fn.lightSlider = function (options) { 52 | if (this.length === 0) { 53 | return this; 54 | } 55 | 56 | if (this.length > 1) { 57 | this.each(function () { 58 | $(this).lightSlider(options); 59 | }); 60 | return this; 61 | } 62 | 63 | var plugin = {}, 64 | settings = $.extend(true, {}, defaults, options), 65 | settingsTemp = {}, 66 | $el = this; 67 | plugin.$el = this; 68 | 69 | if (settings.mode === 'fade') { 70 | settings.vertical = false; 71 | } 72 | var $children = $el.children(), 73 | windowW = $(window).width(), 74 | breakpoint = null, 75 | resposiveObj = null, 76 | length = 0, 77 | w = 0, 78 | on = false, 79 | elSize = 0, 80 | $slide = '', 81 | scene = 0, 82 | property = (settings.vertical === true) ? 'height' : 'width', 83 | gutter = (settings.vertical === true) ? 'margin-bottom' : 'margin-right', 84 | slideValue = 0, 85 | pagerWidth = 0, 86 | slideWidth = 0, 87 | thumbWidth = 0, 88 | interval = null, 89 | isTouch = ('ontouchstart' in document.documentElement); 90 | var refresh = {}; 91 | 92 | refresh.chbreakpoint = function () { 93 | windowW = $(window).width(); 94 | if (settings.responsive.length) { 95 | var item; 96 | if (settings.autoWidth === false) { 97 | item = settings.item; 98 | } 99 | if (windowW < settings.responsive[0].breakpoint) { 100 | for (var i = 0; i < settings.responsive.length; i++) { 101 | if (windowW < settings.responsive[i].breakpoint) { 102 | breakpoint = settings.responsive[i].breakpoint; 103 | resposiveObj = settings.responsive[i]; 104 | } 105 | } 106 | } 107 | if (typeof resposiveObj !== 'undefined' && resposiveObj !== null) { 108 | for (var j in resposiveObj.settings) { 109 | if (resposiveObj.settings.hasOwnProperty(j)) { 110 | if (typeof settingsTemp[j] === 'undefined' || settingsTemp[j] === null) { 111 | settingsTemp[j] = settings[j]; 112 | } 113 | settings[j] = resposiveObj.settings[j]; 114 | } 115 | } 116 | } 117 | if (!$.isEmptyObject(settingsTemp) && windowW > settings.responsive[0].breakpoint) { 118 | for (var k in settingsTemp) { 119 | if (settingsTemp.hasOwnProperty(k)) { 120 | settings[k] = settingsTemp[k]; 121 | } 122 | } 123 | } 124 | if (settings.autoWidth === false) { 125 | if (slideValue > 0 && slideWidth > 0) { 126 | if (item !== settings.item) { 127 | scene = Math.round(slideValue / ((slideWidth + settings.slideMargin) * settings.slideMove)); 128 | } 129 | } 130 | } 131 | } 132 | }; 133 | 134 | refresh.calSW = function () { 135 | if (settings.autoWidth === false) { 136 | slideWidth = (elSize - ((settings.item * (settings.slideMargin)) - settings.slideMargin)) / settings.item; 137 | } 138 | }; 139 | 140 | refresh.calWidth = function (cln) { 141 | var ln = cln === true ? $slide.find('.lslide').length : $children.length; 142 | if (settings.autoWidth === false) { 143 | w = ln * (slideWidth + settings.slideMargin); 144 | } else { 145 | w = 0; 146 | for (var i = 0; i < ln; i++) { 147 | w += (parseInt($children.eq(i).width()) + settings.slideMargin); 148 | } 149 | } 150 | return w; 151 | }; 152 | plugin = { 153 | doCss: function () { 154 | var support = function () { 155 | var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition']; 156 | var root = document.documentElement; 157 | for (var i = 0; i < transition.length; i++) { 158 | if (transition[i] in root.style) { 159 | return true; 160 | } 161 | } 162 | }; 163 | if (settings.useCSS && support()) { 164 | return true; 165 | } 166 | return false; 167 | }, 168 | keyPress: function () { 169 | if (settings.keyPress) { 170 | $(document).on('keyup.lightslider', function (e) { 171 | if (!$(':focus').is('input, textarea')) { 172 | if (e.preventDefault) { 173 | e.preventDefault(); 174 | } else { 175 | e.returnValue = false; 176 | } 177 | if (e.keyCode === 37) { 178 | $el.goToPrevSlide(); 179 | } else if (e.keyCode === 39) { 180 | $el.goToNextSlide(); 181 | } 182 | } 183 | }); 184 | } 185 | }, 186 | controls: function () { 187 | if (settings.controls) { 188 | $el.after('
' + settings.prevHtml + '' + settings.nextHtml + '
'); 189 | if (!settings.autoWidth) { 190 | if (length <= settings.item) { 191 | $slide.find('.lSAction').hide(); 192 | } 193 | } else { 194 | if (refresh.calWidth(false) < elSize) { 195 | $slide.find('.lSAction').hide(); 196 | } 197 | } 198 | $slide.find('.lSAction a').on('click', function (e) { 199 | if (e.preventDefault) { 200 | e.preventDefault(); 201 | } else { 202 | e.returnValue = false; 203 | } 204 | if ($(this).attr('class') === 'lSPrev') { 205 | $el.goToPrevSlide(); 206 | } else { 207 | $el.goToNextSlide(); 208 | } 209 | return false; 210 | }); 211 | } 212 | }, 213 | initialStyle: function () { 214 | var $this = this; 215 | if (settings.mode === 'fade') { 216 | settings.autoWidth = false; 217 | settings.slideEndAnimation = false; 218 | } 219 | if (settings.auto) { 220 | settings.slideEndAnimation = false; 221 | } 222 | if (settings.autoWidth) { 223 | settings.slideMove = 1; 224 | settings.item = 1; 225 | } 226 | if (settings.loop) { 227 | settings.slideMove = 1; 228 | settings.freeMove = false; 229 | } 230 | settings.onBeforeStart.call(this, $el); 231 | refresh.chbreakpoint(); 232 | $el.addClass('lightSlider').wrap('
'); 233 | $slide = $el.parent('.lSSlideWrapper'); 234 | if (settings.rtl === true) { 235 | $slide.parent().addClass('lSrtl'); 236 | } 237 | if (settings.vertical) { 238 | $slide.parent().addClass('vertical'); 239 | elSize = settings.verticalHeight; 240 | $slide.css('height', elSize + 'px'); 241 | } else { 242 | elSize = $el.outerWidth(); 243 | } 244 | $children.addClass('lslide'); 245 | if (settings.loop === true && settings.mode === 'slide') { 246 | refresh.calSW(); 247 | refresh.clone = function () { 248 | if (refresh.calWidth(true) > elSize) { 249 | /**/ 250 | var tWr = 0, 251 | tI = 0; 252 | for (var k = 0; k < $children.length; k++) { 253 | tWr += (parseInt($el.find('.lslide').eq(k).width()) + settings.slideMargin); 254 | tI++; 255 | if (tWr >= (elSize + settings.slideMargin)) { 256 | break; 257 | } 258 | } 259 | var tItem = settings.autoWidth === true ? tI : settings.item; 260 | 261 | /**/ 262 | if (tItem < $el.find('.clone.left').length) { 263 | for (var i = 0; i < $el.find('.clone.left').length - tItem; i++) { 264 | $children.eq(i).remove(); 265 | } 266 | } 267 | if (tItem < $el.find('.clone.right').length) { 268 | for (var j = $children.length - 1; j > ($children.length - 1 - $el.find('.clone.right').length); j--) { 269 | scene--; 270 | $children.eq(j).remove(); 271 | } 272 | } 273 | /**/ 274 | for (var n = $el.find('.clone.right').length; n < tItem; n++) { 275 | $el.find('.lslide').eq(n).clone().removeClass('lslide').addClass('clone right').appendTo($el); 276 | scene++; 277 | } 278 | for (var m = $el.find('.lslide').length - $el.find('.clone.left').length; m > ($el.find('.lslide').length - tItem); m--) { 279 | $el.find('.lslide').eq(m - 1).clone().removeClass('lslide').addClass('clone left').prependTo($el); 280 | } 281 | $children = $el.children(); 282 | } else { 283 | if ($children.hasClass('clone')) { 284 | $el.find('.clone').remove(); 285 | $this.move($el, 0); 286 | } 287 | } 288 | }; 289 | refresh.clone(); 290 | } 291 | refresh.sSW = function () { 292 | length = $children.length; 293 | if (settings.rtl === true && settings.vertical === false) { 294 | gutter = 'margin-left'; 295 | } 296 | if (settings.autoWidth === false) { 297 | $children.css(property, slideWidth + 'px'); 298 | } 299 | $children.css(gutter, settings.slideMargin + 'px'); 300 | w = refresh.calWidth(false); 301 | $el.css(property, w + 'px'); 302 | if (settings.loop === true && settings.mode === 'slide') { 303 | if (on === false) { 304 | scene = $el.find('.clone.left').length; 305 | } 306 | } 307 | }; 308 | refresh.calL = function () { 309 | $children = $el.children(); 310 | length = $children.length; 311 | }; 312 | if (this.doCss()) { 313 | $slide.addClass('usingCss'); 314 | } 315 | refresh.calL(); 316 | if (settings.mode === 'slide') { 317 | refresh.calSW(); 318 | refresh.sSW(); 319 | if (settings.loop === true) { 320 | slideValue = $this.slideValue(); 321 | this.move($el, slideValue); 322 | } 323 | if (settings.vertical === false) { 324 | this.setHeight($el, false); 325 | } 326 | 327 | } else { 328 | this.setHeight($el, true); 329 | $el.addClass('lSFade'); 330 | if (!this.doCss()) { 331 | $children.fadeOut(0); 332 | $children.eq(scene).fadeIn(0); 333 | } 334 | } 335 | if (settings.loop === true && settings.mode === 'slide') { 336 | $children.eq(scene).addClass('active'); 337 | } else { 338 | $children.first().addClass('active'); 339 | } 340 | }, 341 | pager: function () { 342 | var $this = this; 343 | refresh.createPager = function () { 344 | thumbWidth = (elSize - ((settings.thumbItem * (settings.thumbMargin)) - settings.thumbMargin)) / settings.thumbItem; 345 | var $children = $slide.find('.lslide'); 346 | var length = $slide.find('.lslide').length; 347 | var i = 0, 348 | pagers = '', 349 | v = 0; 350 | for (i = 0; i < length; i++) { 351 | if (settings.mode === 'slide') { 352 | // calculate scene * slide value 353 | if (!settings.autoWidth) { 354 | v = i * ((slideWidth + settings.slideMargin) * settings.slideMove); 355 | } else { 356 | v += ((parseInt($children.eq(i).width()) + settings.slideMargin) * settings.slideMove); 357 | } 358 | } 359 | var thumb = $children.eq(i * settings.slideMove).attr('data-thumb'); 360 | if (settings.gallery === true) { 361 | pagers += '
    • '; 362 | } else { 363 | pagers += '
  • ' + (i + 1) + '
    • '; 364 | } 365 | if (settings.mode === 'slide') { 366 | if ((v) >= w - elSize - settings.slideMargin) { 367 | i = i + 1; 368 | var minPgr = 2; 369 | if (settings.autoWidth) { 370 | pagers += '
  • ' + (i + 1) + '
    • '; 371 | minPgr = 1; 372 | } 373 | if (i < minPgr) { 374 | pagers = null; 375 | $slide.parent().addClass('noPager'); 376 | } else { 377 | $slide.parent().removeClass('noPager'); 378 | } 379 | break; 380 | } 381 | } 382 | } 383 | var $cSouter = $slide.parent(); 384 | $cSouter.find('.lSPager').html(pagers); 385 | if (settings.gallery === true) { 386 | if (settings.vertical === true) { 387 | // set Gallery thumbnail width 388 | $cSouter.find('.lSPager').css('width', settings.vThumbWidth + 'px'); 389 | } 390 | pagerWidth = (i * (settings.thumbMargin + thumbWidth)) + 0.5; 391 | $cSouter.find('.lSPager').css({ 392 | property: pagerWidth + 'px', 393 | 'transition-duration': settings.speed + 'ms' 394 | }); 395 | if (settings.vertical === true) { 396 | $slide.parent().css('padding-right', (settings.vThumbWidth + settings.galleryMargin) + 'px'); 397 | } 398 | $cSouter.find('.lSPager').css(property, pagerWidth + 'px'); 399 | } 400 | var $pager = $cSouter.find('.lSPager').find('li'); 401 | $pager.first().addClass('active'); 402 | $pager.on('click', function () { 403 | if (settings.loop === true && settings.mode === 'slide') { 404 | scene = scene + ($pager.index(this) - $cSouter.find('.lSPager').find('li.active').index()); 405 | } else { 406 | scene = $pager.index(this); 407 | } 408 | $el.mode(false); 409 | if (settings.gallery === true) { 410 | $this.slideThumb(); 411 | } 412 | return false; 413 | }); 414 | }; 415 | if (settings.pager) { 416 | var cl = 'lSpg'; 417 | if (settings.gallery) { 418 | cl = 'lSGallery'; 419 | } 420 | $slide.after(''); 421 | var gMargin = (settings.vertical) ? 'margin-left' : 'margin-top'; 422 | $slide.parent().find('.lSPager').css(gMargin, settings.galleryMargin + 'px'); 423 | refresh.createPager(); 424 | } 425 | 426 | setTimeout(function () { 427 | refresh.init(); 428 | }, 0); 429 | }, 430 | setHeight: function (ob, fade) { 431 | var obj = null, 432 | $this = this; 433 | if (settings.loop) { 434 | obj = ob.children('.lslide ').first(); 435 | } else { 436 | obj = ob.children().first(); 437 | } 438 | var setCss = function () { 439 | var tH = obj.outerHeight(), 440 | tP = 0, 441 | tHT = tH; 442 | if (fade) { 443 | tH = 0; 444 | tP = ((tHT) * 100) / elSize; 445 | } 446 | ob.css({ 447 | 'height': tH + 'px', 448 | 'padding-bottom': tP + '%' 449 | }); 450 | }; 451 | setCss(); 452 | if (obj.find('img').length) { 453 | if ( obj.find('img')[0].complete) { 454 | setCss(); 455 | if (!interval) { 456 | $this.auto(); 457 | } 458 | }else{ 459 | obj.find('img').on('load', function () { 460 | setTimeout(function () { 461 | setCss(); 462 | if (!interval) { 463 | $this.auto(); 464 | } 465 | }, 100); 466 | }); 467 | } 468 | }else{ 469 | if (!interval) { 470 | $this.auto(); 471 | } 472 | } 473 | }, 474 | active: function (ob, t) { 475 | if (this.doCss() && settings.mode === 'fade') { 476 | $slide.addClass('on'); 477 | } 478 | var sc = 0; 479 | if (scene * settings.slideMove < length) { 480 | ob.removeClass('active'); 481 | if (!this.doCss() && settings.mode === 'fade' && t === false) { 482 | ob.fadeOut(settings.speed); 483 | } 484 | if (t === true) { 485 | sc = scene; 486 | } else { 487 | sc = scene * settings.slideMove; 488 | } 489 | //t === true ? sc = scene : sc = scene * settings.slideMove; 490 | var l, nl; 491 | if (t === true) { 492 | l = ob.length; 493 | nl = l - 1; 494 | if (sc + 1 >= l) { 495 | sc = nl; 496 | } 497 | } 498 | if (settings.loop === true && settings.mode === 'slide') { 499 | //t === true ? sc = scene - $el.find('.clone.left').length : sc = scene * settings.slideMove; 500 | if (t === true) { 501 | sc = scene - $el.find('.clone.left').length; 502 | } else { 503 | sc = scene * settings.slideMove; 504 | } 505 | if (t === true) { 506 | l = ob.length; 507 | nl = l - 1; 508 | if (sc + 1 === l) { 509 | sc = nl; 510 | } else if (sc + 1 > l) { 511 | sc = 0; 512 | } 513 | } 514 | } 515 | 516 | if (!this.doCss() && settings.mode === 'fade' && t === false) { 517 | ob.eq(sc).fadeIn(settings.speed); 518 | } 519 | ob.eq(sc).addClass('active'); 520 | } else { 521 | ob.removeClass('active'); 522 | ob.eq(ob.length - 1).addClass('active'); 523 | if (!this.doCss() && settings.mode === 'fade' && t === false) { 524 | ob.fadeOut(settings.speed); 525 | ob.eq(sc).fadeIn(settings.speed); 526 | } 527 | } 528 | }, 529 | move: function (ob, v) { 530 | if (settings.rtl === true) { 531 | v = -v; 532 | } 533 | if (this.doCss()) { 534 | if (settings.vertical === true) { 535 | ob.css({ 536 | 'transform': 'translate3d(0px, ' + (-v) + 'px, 0px)', 537 | '-webkit-transform': 'translate3d(0px, ' + (-v) + 'px, 0px)' 538 | }); 539 | } else { 540 | ob.css({ 541 | 'transform': 'translate3d(' + (-v) + 'px, 0px, 0px)', 542 | '-webkit-transform': 'translate3d(' + (-v) + 'px, 0px, 0px)', 543 | }); 544 | } 545 | } else { 546 | if (settings.vertical === true) { 547 | ob.css('position', 'relative').animate({ 548 | top: -v + 'px' 549 | }, settings.speed, settings.easing); 550 | } else { 551 | ob.css('position', 'relative').animate({ 552 | left: -v + 'px' 553 | }, settings.speed, settings.easing); 554 | } 555 | } 556 | var $thumb = $slide.parent().find('.lSPager').find('li'); 557 | this.active($thumb, true); 558 | }, 559 | fade: function () { 560 | this.active($children, false); 561 | var $thumb = $slide.parent().find('.lSPager').find('li'); 562 | this.active($thumb, true); 563 | }, 564 | slide: function () { 565 | var $this = this; 566 | refresh.calSlide = function () { 567 | if (w > elSize) { 568 | slideValue = $this.slideValue(); 569 | $this.active($children, false); 570 | if ((slideValue) > w - elSize - settings.slideMargin) { 571 | slideValue = w - elSize - settings.slideMargin; 572 | } else if (slideValue < 0) { 573 | slideValue = 0; 574 | } 575 | $this.move($el, slideValue); 576 | if (settings.loop === true && settings.mode === 'slide') { 577 | if (scene >= (length - ($el.find('.clone.left').length / settings.slideMove))) { 578 | $this.resetSlide($el.find('.clone.left').length); 579 | } 580 | if (scene === 0) { 581 | $this.resetSlide($slide.find('.lslide').length); 582 | } 583 | } 584 | } 585 | }; 586 | refresh.calSlide(); 587 | }, 588 | resetSlide: function (s) { 589 | var $this = this; 590 | $slide.find('.lSAction a').addClass('disabled'); 591 | setTimeout(function () { 592 | scene = s; 593 | $slide.css('transition-duration', '0ms'); 594 | slideValue = $this.slideValue(); 595 | $this.active($children, false); 596 | plugin.move($el, slideValue); 597 | setTimeout(function () { 598 | $slide.css('transition-duration', settings.speed + 'ms'); 599 | $slide.find('.lSAction a').removeClass('disabled'); 600 | }, 50); 601 | }, settings.speed + 100); 602 | }, 603 | slideValue: function () { 604 | var _sV = 0; 605 | if (settings.autoWidth === false) { 606 | _sV = scene * ((slideWidth + settings.slideMargin) * settings.slideMove); 607 | } else { 608 | _sV = 0; 609 | for (var i = 0; i < scene; i++) { 610 | _sV += (parseInt($children.eq(i).width()) + settings.slideMargin); 611 | } 612 | } 613 | return _sV; 614 | }, 615 | slideThumb: function () { 616 | var position; 617 | switch (settings.currentPagerPosition) { 618 | case 'left': 619 | position = 0; 620 | break; 621 | case 'middle': 622 | position = (elSize / 2) - (thumbWidth / 2); 623 | break; 624 | case 'right': 625 | position = elSize - thumbWidth; 626 | } 627 | var sc = scene - $el.find('.clone.left').length; 628 | var $pager = $slide.parent().find('.lSPager'); 629 | if (settings.mode === 'slide' && settings.loop === true) { 630 | if (sc >= $pager.children().length) { 631 | sc = 0; 632 | } else if (sc < 0) { 633 | sc = $pager.children().length; 634 | } 635 | } 636 | var thumbSlide = sc * ((thumbWidth + settings.thumbMargin)) - (position); 637 | if ((thumbSlide + elSize) > pagerWidth) { 638 | thumbSlide = pagerWidth - elSize - settings.thumbMargin; 639 | } 640 | if (thumbSlide < 0) { 641 | thumbSlide = 0; 642 | } 643 | this.move($pager, thumbSlide); 644 | }, 645 | auto: function () { 646 | if (settings.auto) { 647 | clearInterval(interval); 648 | interval = setInterval(function () { 649 | $el.goToNextSlide(); 650 | }, settings.pause); 651 | } 652 | }, 653 | pauseOnHover: function(){ 654 | var $this = this; 655 | if (settings.auto && settings.pauseOnHover) { 656 | $slide.on('mouseenter', function(){ 657 | $(this).addClass('ls-hover'); 658 | $el.pause(); 659 | settings.auto = true; 660 | }); 661 | $slide.on('mouseleave',function(){ 662 | $(this).removeClass('ls-hover'); 663 | if (!$slide.find('.lightSlider').hasClass('lsGrabbing')) { 664 | $this.auto(); 665 | } 666 | }); 667 | } 668 | }, 669 | touchMove: function (endCoords, startCoords) { 670 | $slide.css('transition-duration', '0ms'); 671 | if (settings.mode === 'slide') { 672 | var distance = endCoords - startCoords; 673 | var swipeVal = slideValue - distance; 674 | if ((swipeVal) >= w - elSize - settings.slideMargin) { 675 | if (settings.freeMove === false) { 676 | swipeVal = w - elSize - settings.slideMargin; 677 | } else { 678 | var swipeValT = w - elSize - settings.slideMargin; 679 | swipeVal = swipeValT + ((swipeVal - swipeValT) / 5); 680 | 681 | } 682 | } else if (swipeVal < 0) { 683 | if (settings.freeMove === false) { 684 | swipeVal = 0; 685 | } else { 686 | swipeVal = swipeVal / 5; 687 | } 688 | } 689 | this.move($el, swipeVal); 690 | } 691 | }, 692 | 693 | touchEnd: function (distance) { 694 | $slide.css('transition-duration', settings.speed + 'ms'); 695 | if (settings.mode === 'slide') { 696 | var mxVal = false; 697 | var _next = true; 698 | slideValue = slideValue - distance; 699 | if ((slideValue) > w - elSize - settings.slideMargin) { 700 | slideValue = w - elSize - settings.slideMargin; 701 | if (settings.autoWidth === false) { 702 | mxVal = true; 703 | } 704 | } else if (slideValue < 0) { 705 | slideValue = 0; 706 | } 707 | var gC = function (next) { 708 | var ad = 0; 709 | if (!mxVal) { 710 | if (next) { 711 | ad = 1; 712 | } 713 | } 714 | if (!settings.autoWidth) { 715 | var num = slideValue / ((slideWidth + settings.slideMargin) * settings.slideMove); 716 | scene = parseInt(num) + ad; 717 | if (slideValue >= (w - elSize - settings.slideMargin)) { 718 | if (num % 1 !== 0) { 719 | scene++; 720 | } 721 | } 722 | } else { 723 | var tW = 0; 724 | for (var i = 0; i < $children.length; i++) { 725 | tW += (parseInt($children.eq(i).width()) + settings.slideMargin); 726 | scene = i + ad; 727 | if (tW >= slideValue) { 728 | break; 729 | } 730 | } 731 | } 732 | }; 733 | if (distance >= settings.swipeThreshold) { 734 | gC(false); 735 | _next = false; 736 | } else if (distance <= -settings.swipeThreshold) { 737 | gC(true); 738 | _next = false; 739 | } 740 | $el.mode(_next); 741 | this.slideThumb(); 742 | } else { 743 | if (distance >= settings.swipeThreshold) { 744 | $el.goToPrevSlide(); 745 | } else if (distance <= -settings.swipeThreshold) { 746 | $el.goToNextSlide(); 747 | } 748 | } 749 | }, 750 | 751 | 752 | 753 | enableDrag: function () { 754 | var $this = this; 755 | if (!isTouch) { 756 | var startCoords = 0, 757 | endCoords = 0, 758 | isDraging = false; 759 | $slide.find('.lightSlider').addClass('lsGrab'); 760 | $slide.on('mousedown', function (e) { 761 | if (w < elSize) { 762 | if (w !== 0) { 763 | return false; 764 | } 765 | } 766 | if ($(e.target).attr('class') !== ('lSPrev') && $(e.target).attr('class') !== ('lSNext')) { 767 | startCoords = (settings.vertical === true) ? e.pageY : e.pageX; 768 | isDraging = true; 769 | if (e.preventDefault) { 770 | e.preventDefault(); 771 | } else { 772 | e.returnValue = false; 773 | } 774 | // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 775 | $slide.scrollLeft += 1; 776 | $slide.scrollLeft -= 1; 777 | // * 778 | $slide.find('.lightSlider').removeClass('lsGrab').addClass('lsGrabbing'); 779 | clearInterval(interval); 780 | } 781 | }); 782 | $(window).on('mousemove', function (e) { 783 | if (isDraging) { 784 | endCoords = (settings.vertical === true) ? e.pageY : e.pageX; 785 | $this.touchMove(endCoords, startCoords); 786 | } 787 | }); 788 | $(window).on('mouseup', function (e) { 789 | if (isDraging) { 790 | $slide.find('.lightSlider').removeClass('lsGrabbing').addClass('lsGrab'); 791 | isDraging = false; 792 | endCoords = (settings.vertical === true) ? e.pageY : e.pageX; 793 | var distance = endCoords - startCoords; 794 | if (Math.abs(distance) >= settings.swipeThreshold) { 795 | $(window).on('click.ls', function (e) { 796 | if (e.preventDefault) { 797 | e.preventDefault(); 798 | } else { 799 | e.returnValue = false; 800 | } 801 | e.stopImmediatePropagation(); 802 | e.stopPropagation(); 803 | $(window).off('click.ls'); 804 | }); 805 | } 806 | 807 | $this.touchEnd(distance); 808 | 809 | } 810 | }); 811 | } 812 | }, 813 | 814 | 815 | 816 | 817 | enableTouch: function () { 818 | var $this = this; 819 | if (isTouch) { 820 | var startCoords = {}, 821 | endCoords = {}; 822 | $slide.on('touchstart', function (e) { 823 | endCoords = e.originalEvent.targetTouches[0]; 824 | startCoords.pageX = e.originalEvent.targetTouches[0].pageX; 825 | startCoords.pageY = e.originalEvent.targetTouches[0].pageY; 826 | clearInterval(interval); 827 | }); 828 | $slide.on('touchmove', function (e) { 829 | if (w < elSize) { 830 | if (w !== 0) { 831 | return false; 832 | } 833 | } 834 | var orig = e.originalEvent; 835 | endCoords = orig.targetTouches[0]; 836 | var xMovement = Math.abs(endCoords.pageX - startCoords.pageX); 837 | var yMovement = Math.abs(endCoords.pageY - startCoords.pageY); 838 | if (settings.vertical === true) { 839 | if ((yMovement * 3) > xMovement) { 840 | e.preventDefault(); 841 | } 842 | $this.touchMove(endCoords.pageY, startCoords.pageY); 843 | } else { 844 | if ((xMovement * 3) > yMovement) { 845 | e.preventDefault(); 846 | } 847 | $this.touchMove(endCoords.pageX, startCoords.pageX); 848 | } 849 | 850 | }); 851 | $slide.on('touchend', function () { 852 | if (w < elSize) { 853 | if (w !== 0) { 854 | return false; 855 | } 856 | } 857 | var distance; 858 | if (settings.vertical === true) { 859 | distance = endCoords.pageY - startCoords.pageY; 860 | } else { 861 | distance = endCoords.pageX - startCoords.pageX; 862 | } 863 | $this.touchEnd(distance); 864 | }); 865 | } 866 | }, 867 | build: function () { 868 | var $this = this; 869 | $this.initialStyle(); 870 | if (this.doCss()) { 871 | 872 | if (settings.enableTouch === true) { 873 | $this.enableTouch(); 874 | } 875 | if (settings.enableDrag === true) { 876 | $this.enableDrag(); 877 | } 878 | } 879 | 880 | $(window).on('focus', function(){ 881 | $this.auto(); 882 | }); 883 | 884 | $(window).on('blur', function(){ 885 | clearInterval(interval); 886 | }); 887 | 888 | $this.pager(); 889 | $this.pauseOnHover(); 890 | $this.controls(); 891 | $this.keyPress(); 892 | } 893 | }; 894 | plugin.build(); 895 | refresh.init = function () { 896 | refresh.chbreakpoint(); 897 | if (settings.vertical === true) { 898 | if (settings.item > 1) { 899 | elSize = settings.verticalHeight; 900 | } else { 901 | elSize = $children.outerHeight(); 902 | } 903 | $slide.css('height', elSize + 'px'); 904 | } else { 905 | elSize = $slide.outerWidth(); 906 | } 907 | if (settings.loop === true && settings.mode === 'slide') { 908 | refresh.clone(); 909 | } 910 | refresh.calL(); 911 | if (settings.mode === 'slide') { 912 | $el.removeClass('lSSlide'); 913 | } 914 | if (settings.mode === 'slide') { 915 | refresh.calSW(); 916 | refresh.sSW(); 917 | } 918 | setTimeout(function () { 919 | if (settings.mode === 'slide') { 920 | $el.addClass('lSSlide'); 921 | } 922 | }, 1000); 923 | if (settings.pager) { 924 | refresh.createPager(); 925 | } 926 | if (settings.adaptiveHeight === true && settings.vertical === false) { 927 | $el.css('height', $children.eq(scene).outerHeight(true)); 928 | } 929 | if (settings.adaptiveHeight === false) { 930 | if (settings.mode === 'slide') { 931 | if (settings.vertical === false) { 932 | plugin.setHeight($el, false); 933 | }else{ 934 | plugin.auto(); 935 | } 936 | } else { 937 | plugin.setHeight($el, true); 938 | } 939 | } 940 | if (settings.gallery === true) { 941 | plugin.slideThumb(); 942 | } 943 | if (settings.mode === 'slide') { 944 | plugin.slide(); 945 | } 946 | if (settings.autoWidth === false) { 947 | if ($children.length <= settings.item) { 948 | $slide.find('.lSAction').hide(); 949 | } else { 950 | $slide.find('.lSAction').show(); 951 | } 952 | } else { 953 | if ((refresh.calWidth(false) < elSize) && (w !== 0)) { 954 | $slide.find('.lSAction').hide(); 955 | } else { 956 | $slide.find('.lSAction').show(); 957 | } 958 | } 959 | }; 960 | $el.goToPrevSlide = function () { 961 | if (scene > 0) { 962 | settings.onBeforePrevSlide.call(this, $el, scene); 963 | scene--; 964 | $el.mode(false); 965 | if (settings.gallery === true) { 966 | plugin.slideThumb(); 967 | } 968 | } else { 969 | if (settings.loop === true) { 970 | settings.onBeforePrevSlide.call(this, $el, scene); 971 | if (settings.mode === 'fade') { 972 | var l = (length - 1); 973 | scene = parseInt(l / settings.slideMove); 974 | } 975 | $el.mode(false); 976 | if (settings.gallery === true) { 977 | plugin.slideThumb(); 978 | } 979 | } else if (settings.slideEndAnimation === true) { 980 | $el.addClass('leftEnd'); 981 | setTimeout(function () { 982 | $el.removeClass('leftEnd'); 983 | }, 400); 984 | } 985 | } 986 | }; 987 | $el.goToNextSlide = function () { 988 | var nextI = true; 989 | if (settings.mode === 'slide') { 990 | var _slideValue = plugin.slideValue(); 991 | nextI = _slideValue < w - elSize - settings.slideMargin; 992 | } 993 | if (((scene * settings.slideMove) < length - settings.slideMove) && nextI) { 994 | settings.onBeforeNextSlide.call(this, $el, scene); 995 | scene++; 996 | $el.mode(false); 997 | if (settings.gallery === true) { 998 | plugin.slideThumb(); 999 | } 1000 | } else { 1001 | if (settings.loop === true) { 1002 | settings.onBeforeNextSlide.call(this, $el, scene); 1003 | scene = 0; 1004 | $el.mode(false); 1005 | if (settings.gallery === true) { 1006 | plugin.slideThumb(); 1007 | } 1008 | } else if (settings.slideEndAnimation === true) { 1009 | $el.addClass('rightEnd'); 1010 | setTimeout(function () { 1011 | $el.removeClass('rightEnd'); 1012 | }, 400); 1013 | } 1014 | } 1015 | }; 1016 | $el.mode = function (_touch) { 1017 | if (settings.adaptiveHeight === true && settings.vertical === false) { 1018 | $el.css('height', $children.eq(scene).outerHeight(true)); 1019 | } 1020 | if (on === false) { 1021 | if (settings.mode === 'slide') { 1022 | if (plugin.doCss()) { 1023 | $el.addClass('lSSlide'); 1024 | if (settings.speed !== '') { 1025 | $slide.css('transition-duration', settings.speed + 'ms'); 1026 | } 1027 | if (settings.cssEasing !== '') { 1028 | $slide.css('transition-timing-function', settings.cssEasing); 1029 | } 1030 | } 1031 | } else { 1032 | if (plugin.doCss()) { 1033 | if (settings.speed !== '') { 1034 | $el.css('transition-duration', settings.speed + 'ms'); 1035 | } 1036 | if (settings.cssEasing !== '') { 1037 | $el.css('transition-timing-function', settings.cssEasing); 1038 | } 1039 | } 1040 | } 1041 | } 1042 | if (!_touch) { 1043 | settings.onBeforeSlide.call(this, $el, scene); 1044 | } 1045 | if (settings.mode === 'slide') { 1046 | plugin.slide(); 1047 | } else { 1048 | plugin.fade(); 1049 | } 1050 | if (!$slide.hasClass('ls-hover')) { 1051 | plugin.auto(); 1052 | } 1053 | setTimeout(function () { 1054 | if (!_touch) { 1055 | settings.onAfterSlide.call(this, $el, scene); 1056 | } 1057 | }, settings.speed); 1058 | on = true; 1059 | }; 1060 | $el.play = function () { 1061 | $el.goToNextSlide(); 1062 | settings.auto = true; 1063 | plugin.auto(); 1064 | }; 1065 | $el.pause = function () { 1066 | settings.auto = false; 1067 | clearInterval(interval); 1068 | }; 1069 | $el.refresh = function () { 1070 | refresh.init(); 1071 | }; 1072 | $el.getCurrentSlideCount = function () { 1073 | var sc = scene; 1074 | if (settings.loop) { 1075 | var ln = $slide.find('.lslide').length, 1076 | cl = $el.find('.clone.left').length; 1077 | if (scene <= cl - 1) { 1078 | sc = ln + (scene - cl); 1079 | } else if (scene >= (ln + cl)) { 1080 | sc = scene - ln - cl; 1081 | } else { 1082 | sc = scene - cl; 1083 | } 1084 | } 1085 | return sc + 1; 1086 | }; 1087 | $el.getTotalSlideCount = function () { 1088 | return $slide.find('.lslide').length; 1089 | }; 1090 | $el.goToSlide = function (s) { 1091 | if (settings.loop) { 1092 | scene = (s + $el.find('.clone.left').length - 1); 1093 | } else { 1094 | scene = s; 1095 | } 1096 | $el.mode(false); 1097 | if (settings.gallery === true) { 1098 | plugin.slideThumb(); 1099 | } 1100 | }; 1101 | $el.destroy = function () { 1102 | if ($el.lightSlider) { 1103 | $el.goToPrevSlide = function(){}; 1104 | $el.goToNextSlide = function(){}; 1105 | $el.mode = function(){}; 1106 | $el.play = function(){}; 1107 | $el.pause = function(){}; 1108 | $el.refresh = function(){}; 1109 | $el.getCurrentSlideCount = function(){}; 1110 | $el.getTotalSlideCount = function(){}; 1111 | $el.goToSlide = function(){}; 1112 | $el.lightSlider = null; 1113 | refresh = { 1114 | init : function(){} 1115 | }; 1116 | $el.parent().parent().find('.lSAction, .lSPager').remove(); 1117 | $el.removeClass('lightSlider lSFade lSSlide lsGrab lsGrabbing leftEnd right').removeAttr('style').unwrap().unwrap(); 1118 | $el.children().removeAttr('style'); 1119 | $children.removeClass('lslide active'); 1120 | $el.find('.clone').remove(); 1121 | $children = null; 1122 | interval = null; 1123 | on = false; 1124 | scene = 0; 1125 | } 1126 | 1127 | }; 1128 | setTimeout(function () { 1129 | settings.onSliderLoad.call(this, $el); 1130 | }, 10); 1131 | $(window).on('resize orientationchange', function (e) { 1132 | setTimeout(function () { 1133 | if (e.preventDefault) { 1134 | e.preventDefault(); 1135 | } else { 1136 | e.returnValue = false; 1137 | } 1138 | refresh.init(); 1139 | }, 200); 1140 | }); 1141 | return this; 1142 | }; 1143 | }(jQuery)); 1144 | -------------------------------------------------------------------------------- /dist/js/lightslider.min.js: -------------------------------------------------------------------------------- 1 | /*! lightslider - v1.1.6 - 2016-10-25 2 | * https://github.com/sachinchoolur/lightslider 3 | * Copyright (c) 2016 Sachin N; Licensed MIT */ 4 | !function(a,b){"use strict";var c={item:3,autoWidth:!1,slideMove:1,slideMargin:10,addClass:"",mode:"slide",useCSS:!0,cssEasing:"ease",easing:"linear",speed:400,auto:!1,pauseOnHover:!1,loop:!1,slideEndAnimation:!0,pause:2e3,keyPress:!1,controls:!0,prevHtml:"",nextHtml:"",rtl:!1,adaptiveHeight:!1,vertical:!1,verticalHeight:500,vThumbWidth:100,thumbItem:10,pager:!0,gallery:!1,galleryMargin:5,thumbMargin:5,currentPagerPosition:"middle",enableTouch:!0,enableDrag:!0,freeMove:!0,swipeThreshold:40,responsive:[],onBeforeStart:function(a){},onSliderLoad:function(a){},onBeforeSlide:function(a,b){},onAfterSlide:function(a,b){},onBeforeNextSlide:function(a,b){},onBeforePrevSlide:function(a,b){}};a.fn.lightSlider=function(b){if(0===this.length)return this;if(this.length>1)return this.each(function(){a(this).lightSlider(b)}),this;var d={},e=a.extend(!0,{},c,b),f={},g=this;d.$el=this,"fade"===e.mode&&(e.vertical=!1);var h=g.children(),i=a(window).width(),j=null,k=null,l=0,m=0,n=!1,o=0,p="",q=0,r=e.vertical===!0?"height":"width",s=e.vertical===!0?"margin-bottom":"margin-right",t=0,u=0,v=0,w=0,x=null,y="ontouchstart"in document.documentElement,z={};return z.chbreakpoint=function(){if(i=a(window).width(),e.responsive.length){var b;if(e.autoWidth===!1&&(b=e.item),ie.responsive[0].breakpoint)for(var g in f)f.hasOwnProperty(g)&&(e[g]=f[g]);e.autoWidth===!1&&t>0&&v>0&&b!==e.item&&(q=Math.round(t/((v+e.slideMargin)*e.slideMove)))}},z.calSW=function(){e.autoWidth===!1&&(v=(o-(e.item*e.slideMargin-e.slideMargin))/e.item)},z.calWidth=function(a){var b=a===!0?p.find(".lslide").length:h.length;if(e.autoWidth===!1)m=b*(v+e.slideMargin);else{m=0;for(var c=0;b>c;c++)m+=parseInt(h.eq(c).width())+e.slideMargin}return m},d={doCss:function(){var a=function(){for(var a=["transition","MozTransition","WebkitTransition","OTransition","msTransition","KhtmlTransition"],b=document.documentElement,c=0;c'+e.prevHtml+''+e.nextHtml+""),e.autoWidth?z.calWidth(!1)
    '),p=g.parent(".lSSlideWrapper"),e.rtl===!0&&p.parent().addClass("lSrtl"),e.vertical?(p.parent().addClass("vertical"),o=e.verticalHeight,p.css("height",o+"px")):o=g.outerWidth(),h.addClass("lslide"),e.loop===!0&&"slide"===e.mode&&(z.calSW(),z.clone=function(){if(z.calWidth(!0)>o){for(var b=0,c=0,d=0;d=o+e.slideMargin));d++);var f=e.autoWidth===!0?c:e.item;if(fh.length-1-g.find(".clone.right").length;j--)q--,h.eq(j).remove();for(var k=g.find(".clone.right").length;f>k;k++)g.find(".lslide").eq(k).clone().removeClass("lslide").addClass("clone right").appendTo(g),q++;for(var l=g.find(".lslide").length-g.find(".clone.left").length;l>g.find(".lslide").length-f;l--)g.find(".lslide").eq(l-1).clone().removeClass("lslide").addClass("clone left").prependTo(g);h=g.children()}else h.hasClass("clone")&&(g.find(".clone").remove(),a.move(g,0))},z.clone()),z.sSW=function(){l=h.length,e.rtl===!0&&e.vertical===!1&&(s="margin-left"),e.autoWidth===!1&&h.css(r,v+"px"),h.css(s,e.slideMargin+"px"),m=z.calWidth(!1),g.css(r,m+"px"),e.loop===!0&&"slide"===e.mode&&n===!1&&(q=g.find(".clone.left").length)},z.calL=function(){h=g.children(),l=h.length},this.doCss()&&p.addClass("usingCss"),z.calL(),"slide"===e.mode?(z.calSW(),z.sSW(),e.loop===!0&&(t=a.slideValue(),this.move(g,t)),e.vertical===!1&&this.setHeight(g,!1)):(this.setHeight(g,!0),g.addClass("lSFade"),this.doCss()||(h.fadeOut(0),h.eq(q).fadeIn(0))),e.loop===!0&&"slide"===e.mode?h.eq(q).addClass("active"):h.first().addClass("active")},pager:function(){var a=this;if(z.createPager=function(){w=(o-(e.thumbItem*e.thumbMargin-e.thumbMargin))/e.thumbItem;var b=p.find(".lslide"),c=p.find(".lslide").length,d=0,f="",h=0;for(d=0;c>d;d++){"slide"===e.mode&&(e.autoWidth?h+=(parseInt(b.eq(d).width())+e.slideMargin)*e.slideMove:h=d*(v+e.slideMargin)*e.slideMove);var i=b.eq(d*e.slideMove).attr("data-thumb");if(f+=e.gallery===!0?'
    • ':'
  • '+(d+1)+"
    • ","slide"===e.mode&&h>=m-o-e.slideMargin){d+=1;var j=2;e.autoWidth&&(f+='
  • '+(d+1)+"
    • ",j=1),j>d?(f=null,p.parent().addClass("noPager")):p.parent().removeClass("noPager");break}}var k=p.parent();k.find(".lSPager").html(f),e.gallery===!0&&(e.vertical===!0&&k.find(".lSPager").css("width",e.vThumbWidth+"px"),u=d*(e.thumbMargin+w)+.5,k.find(".lSPager").css({property:u+"px","transition-duration":e.speed+"ms"}),e.vertical===!0&&p.parent().css("padding-right",e.vThumbWidth+e.galleryMargin+"px"),k.find(".lSPager").css(r,u+"px"));var l=k.find(".lSPager").find("li");l.first().addClass("active"),l.on("click",function(){return e.loop===!0&&"slide"===e.mode?q+=l.index(this)-k.find(".lSPager").find("li.active").index():q=l.index(this),g.mode(!1),e.gallery===!0&&a.slideThumb(),!1})},e.pager){var b="lSpg";e.gallery&&(b="lSGallery"),p.after('
      ');var c=e.vertical?"margin-left":"margin-top";p.parent().find(".lSPager").css(c,e.galleryMargin+"px"),z.createPager()}setTimeout(function(){z.init()},0)},setHeight:function(a,b){var c=null,d=this;c=e.loop?a.children(".lslide ").first():a.children().first();var f=function(){var d=c.outerHeight(),e=0,f=d;b&&(d=0,e=100*f/o),a.css({height:d+"px","padding-bottom":e+"%"})};f(),c.find("img").length?c.find("img")[0].complete?(f(),x||d.auto()):c.find("img").on("load",function(){setTimeout(function(){f(),x||d.auto()},100)}):x||d.auto()},active:function(a,b){this.doCss()&&"fade"===e.mode&&p.addClass("on");var c=0;if(q*e.slideMove=d&&(c=f)),e.loop===!0&&"slide"===e.mode&&(c=b===!0?q-g.find(".clone.left").length:q*e.slideMove,b===!0&&(d=a.length,f=d-1,c+1===d?c=f:c+1>d&&(c=0))),this.doCss()||"fade"!==e.mode||b!==!1||a.eq(c).fadeIn(e.speed),a.eq(c).addClass("active")}else a.removeClass("active"),a.eq(a.length-1).addClass("active"),this.doCss()||"fade"!==e.mode||b!==!1||(a.fadeOut(e.speed),a.eq(c).fadeIn(e.speed))},move:function(a,b){e.rtl===!0&&(b=-b),this.doCss()?a.css(e.vertical===!0?{transform:"translate3d(0px, "+-b+"px, 0px)","-webkit-transform":"translate3d(0px, "+-b+"px, 0px)"}:{transform:"translate3d("+-b+"px, 0px, 0px)","-webkit-transform":"translate3d("+-b+"px, 0px, 0px)"}):e.vertical===!0?a.css("position","relative").animate({top:-b+"px"},e.speed,e.easing):a.css("position","relative").animate({left:-b+"px"},e.speed,e.easing);var c=p.parent().find(".lSPager").find("li");this.active(c,!0)},fade:function(){this.active(h,!1);var a=p.parent().find(".lSPager").find("li");this.active(a,!0)},slide:function(){var a=this;z.calSlide=function(){m>o&&(t=a.slideValue(),a.active(h,!1),t>m-o-e.slideMargin?t=m-o-e.slideMargin:0>t&&(t=0),a.move(g,t),e.loop===!0&&"slide"===e.mode&&(q>=l-g.find(".clone.left").length/e.slideMove&&a.resetSlide(g.find(".clone.left").length),0===q&&a.resetSlide(p.find(".lslide").length)))},z.calSlide()},resetSlide:function(a){var b=this;p.find(".lSAction a").addClass("disabled"),setTimeout(function(){q=a,p.css("transition-duration","0ms"),t=b.slideValue(),b.active(h,!1),d.move(g,t),setTimeout(function(){p.css("transition-duration",e.speed+"ms"),p.find(".lSAction a").removeClass("disabled")},50)},e.speed+100)},slideValue:function(){var a=0;if(e.autoWidth===!1)a=q*(v+e.slideMargin)*e.slideMove;else{a=0;for(var b=0;q>b;b++)a+=parseInt(h.eq(b).width())+e.slideMargin}return a},slideThumb:function(){var a;switch(e.currentPagerPosition){case"left":a=0;break;case"middle":a=o/2-w/2;break;case"right":a=o-w}var b=q-g.find(".clone.left").length,c=p.parent().find(".lSPager");"slide"===e.mode&&e.loop===!0&&(b>=c.children().length?b=0:0>b&&(b=c.children().length));var d=b*(w+e.thumbMargin)-a;d+o>u&&(d=u-o-e.thumbMargin),0>d&&(d=0),this.move(c,d)},auto:function(){e.auto&&(clearInterval(x),x=setInterval(function(){g.goToNextSlide()},e.pause))},pauseOnHover:function(){var b=this;e.auto&&e.pauseOnHover&&(p.on("mouseenter",function(){a(this).addClass("ls-hover"),g.pause(),e.auto=!0}),p.on("mouseleave",function(){a(this).removeClass("ls-hover"),p.find(".lightSlider").hasClass("lsGrabbing")||b.auto()}))},touchMove:function(a,b){if(p.css("transition-duration","0ms"),"slide"===e.mode){var c=a-b,d=t-c;if(d>=m-o-e.slideMargin)if(e.freeMove===!1)d=m-o-e.slideMargin;else{var f=m-o-e.slideMargin;d=f+(d-f)/5}else 0>d&&(e.freeMove===!1?d=0:d/=5);this.move(g,d)}},touchEnd:function(a){if(p.css("transition-duration",e.speed+"ms"),"slide"===e.mode){var b=!1,c=!0;t-=a,t>m-o-e.slideMargin?(t=m-o-e.slideMargin,e.autoWidth===!1&&(b=!0)):0>t&&(t=0);var d=function(a){var c=0;if(b||a&&(c=1),e.autoWidth)for(var d=0,f=0;f=t));f++);else{var g=t/((v+e.slideMargin)*e.slideMove);q=parseInt(g)+c,t>=m-o-e.slideMargin&&g%1!==0&&q++}};a>=e.swipeThreshold?(d(!1),c=!1):a<=-e.swipeThreshold&&(d(!0),c=!1),g.mode(c),this.slideThumb()}else a>=e.swipeThreshold?g.goToPrevSlide():a<=-e.swipeThreshold&&g.goToNextSlide()},enableDrag:function(){var b=this;if(!y){var c=0,d=0,f=!1;p.find(".lightSlider").addClass("lsGrab"),p.on("mousedown",function(b){return o>m&&0!==m?!1:void("lSPrev"!==a(b.target).attr("class")&&"lSNext"!==a(b.target).attr("class")&&(c=e.vertical===!0?b.pageY:b.pageX,f=!0,b.preventDefault?b.preventDefault():b.returnValue=!1,p.scrollLeft+=1,p.scrollLeft-=1,p.find(".lightSlider").removeClass("lsGrab").addClass("lsGrabbing"),clearInterval(x)))}),a(window).on("mousemove",function(a){f&&(d=e.vertical===!0?a.pageY:a.pageX,b.touchMove(d,c))}),a(window).on("mouseup",function(g){if(f){p.find(".lightSlider").removeClass("lsGrabbing").addClass("lsGrab"),f=!1,d=e.vertical===!0?g.pageY:g.pageX;var h=d-c;Math.abs(h)>=e.swipeThreshold&&a(window).on("click.ls",function(b){b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopImmediatePropagation(),b.stopPropagation(),a(window).off("click.ls")}),b.touchEnd(h)}})}},enableTouch:function(){var a=this;if(y){var b={},c={};p.on("touchstart",function(a){c=a.originalEvent.targetTouches[0],b.pageX=a.originalEvent.targetTouches[0].pageX,b.pageY=a.originalEvent.targetTouches[0].pageY,clearInterval(x)}),p.on("touchmove",function(d){if(o>m&&0!==m)return!1;var f=d.originalEvent;c=f.targetTouches[0];var g=Math.abs(c.pageX-b.pageX),h=Math.abs(c.pageY-b.pageY);e.vertical===!0?(3*h>g&&d.preventDefault(),a.touchMove(c.pageY,b.pageY)):(3*g>h&&d.preventDefault(),a.touchMove(c.pageX,b.pageX))}),p.on("touchend",function(){if(o>m&&0!==m)return!1;var d;d=e.vertical===!0?c.pageY-b.pageY:c.pageX-b.pageX,a.touchEnd(d)})}},build:function(){var b=this;b.initialStyle(),this.doCss()&&(e.enableTouch===!0&&b.enableTouch(),e.enableDrag===!0&&b.enableDrag()),a(window).on("focus",function(){b.auto()}),a(window).on("blur",function(){clearInterval(x)}),b.pager(),b.pauseOnHover(),b.controls(),b.keyPress()}},d.build(),z.init=function(){z.chbreakpoint(),e.vertical===!0?(o=e.item>1?e.verticalHeight:h.outerHeight(),p.css("height",o+"px")):o=p.outerWidth(),e.loop===!0&&"slide"===e.mode&&z.clone(),z.calL(),"slide"===e.mode&&g.removeClass("lSSlide"),"slide"===e.mode&&(z.calSW(),z.sSW()),setTimeout(function(){"slide"===e.mode&&g.addClass("lSSlide")},1e3),e.pager&&z.createPager(),e.adaptiveHeight===!0&&e.vertical===!1&&g.css("height",h.eq(q).outerHeight(!0)),e.adaptiveHeight===!1&&("slide"===e.mode?e.vertical===!1?d.setHeight(g,!1):d.auto():d.setHeight(g,!0)),e.gallery===!0&&d.slideThumb(),"slide"===e.mode&&d.slide(),e.autoWidth===!1?h.length<=e.item?p.find(".lSAction").hide():p.find(".lSAction").show():z.calWidth(!1)0)e.onBeforePrevSlide.call(this,g,q),q--,g.mode(!1),e.gallery===!0&&d.slideThumb();else if(e.loop===!0){if(e.onBeforePrevSlide.call(this,g,q),"fade"===e.mode){var a=l-1;q=parseInt(a/e.slideMove)}g.mode(!1),e.gallery===!0&&d.slideThumb()}else e.slideEndAnimation===!0&&(g.addClass("leftEnd"),setTimeout(function(){g.removeClass("leftEnd")},400))},g.goToNextSlide=function(){var a=!0;if("slide"===e.mode){var b=d.slideValue();a=b=q?b+(q-c):q>=b+c?q-b-c:q-c}return a+1},g.getTotalSlideCount=function(){return p.find(".lslide").length},g.goToSlide=function(a){q=e.loop?a+g.find(".clone.left").length-1:a,g.mode(!1),e.gallery===!0&&d.slideThumb()},g.destroy=function(){g.lightSlider&&(g.goToPrevSlide=function(){},g.goToNextSlide=function(){},g.mode=function(){},g.play=function(){},g.pause=function(){},g.refresh=function(){},g.getCurrentSlideCount=function(){},g.getTotalSlideCount=function(){},g.goToSlide=function(){},g.lightSlider=null,z={init:function(){}},g.parent().parent().find(".lSAction, .lSPager").remove(),g.removeClass("lightSlider lSFade lSSlide lsGrab lsGrabbing leftEnd right").removeAttr("style").unwrap().unwrap(),g.children().removeAttr("style"),h.removeClass("lslide active"),g.find(".clone").remove(),h=null,x=null,n=!1,q=0)},setTimeout(function(){e.onSliderLoad.call(this,g)},10),a(window).on("resize orientationchange",function(a){setTimeout(function(){a.preventDefault?a.preventDefault():a.returnValue=!1,z.init()},200)}),this}}(jQuery); -------------------------------------------------------------------------------- /lightslider.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"lightslider", 3 | "title":"jQuery lightSlider", 4 | "description":"jQuery lightSlider is a lightweight responsive content slider - carousel with animated thumbnails navigation", 5 | "keywords":[ 6 | "slider", 7 | "contentslider", 8 | "textslider", 9 | "slideshow", 10 | "gallery", 11 | "responsive", 12 | "carousel", 13 | "animation", 14 | "jQuery", 15 | "video", 16 | "image", 17 | "CSS3", 18 | "touch", 19 | "swipe", 20 | "thumbnail" 21 | ], 22 | "version":"1.1.5", 23 | "author":{ 24 | "name":"Sachin N", 25 | "url":"https://github.com/sachinchoolur" 26 | }, 27 | "maintainers":[ 28 | { 29 | "name":"Sachin N", 30 | "email":"sachi77n@gmail.com", 31 | "url":"https://github.com/sachinchoolur" 32 | } 33 | ], 34 | "licenses":[ 35 | { 36 | "type":"MLT License", 37 | "url":"http://opensource.org/licenses/mit-license.html" 38 | } 39 | ], 40 | "bugs":"https://github.com/sachinchoolur/lightslider/issues", 41 | "homepage":"http://sachinchoolur.github.io/lightslider/", 42 | "docs":"http://sachinchoolur.github.io/lightslider/", 43 | "download":"http://sachinchoolur.github.io/lightslider/lightSlider.zip", 44 | "dependencies":{ 45 | "jquery":">=1.7.0" 46 | } 47 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lightslider", 3 | "description": "jQuery lightSlider is a lightweight responsive content slider - carousel with animated thumbnails navigation", 4 | "version": "1.1.6", 5 | "keywords": [ 6 | "slider", 7 | "contentslider", 8 | "textslider", 9 | "slideshow", 10 | "gallery", 11 | "responsive", 12 | "carousel", 13 | "animation", 14 | "jQuery", 15 | "video", 16 | "image", 17 | "CSS3", 18 | "touch", 19 | "swipe", 20 | "thumbnail" 21 | ], 22 | "main": "dist/js/lightslider.js", 23 | "author": { 24 | "name": "Sachin N", 25 | "email": "sachi77n@gmail.com", 26 | "url": "https://github.com/sachinchoolur" 27 | }, 28 | "homepage": "https://github.com/sachinchoolur/lightslider", 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/sachinchoolur/lightslider.git" 32 | }, 33 | "bugs": { 34 | "url": "https://github.com/sachinchoolur/lightslider/issues" 35 | }, 36 | "license": { 37 | "type": "MIT", 38 | "url": "http://opensource.org/licenses/MIT" 39 | }, 40 | "dependencies": { 41 | "jquery": ">= 1.7.0" 42 | }, 43 | "scripts": { 44 | "test": "grunt" 45 | }, 46 | "devDependencies": { 47 | "grunt": "^0.4.5", 48 | "grunt-contrib-clean": "^0.6.0", 49 | "grunt-contrib-concat": "^0.5.0", 50 | "grunt-contrib-connect": "^0.9.0", 51 | "grunt-contrib-copy": "^0.8.0", 52 | "grunt-contrib-cssmin": "^0.12.1", 53 | "grunt-contrib-jshint": "^0.10.0", 54 | "grunt-contrib-qunit": "^0.5.1", 55 | "grunt-contrib-sass": "^0.9.2", 56 | "grunt-contrib-uglify": "^0.7.0", 57 | "grunt-contrib-watch": "^0.6.1", 58 | "jshint-stylish": "^1.0.0", 59 | "load-grunt-tasks": "^2.0.0", 60 | "time-grunt": "^1.0.0" 61 | } 62 | } -------------------------------------------------------------------------------- /src/css/lightslider.css: -------------------------------------------------------------------------------- 1 | /*! lightslider - v1.1.3 - 2015-04-14 2 | * https://github.com/sachinchoolur/lightslider 3 | * Copyright (c) 2015 Sachin N; Licensed MIT */ 4 | /** /!!! core css Should not edit !!!/**/ 5 | 6 | .lSSlideOuter { 7 | overflow: hidden; 8 | -webkit-touch-callout: none; 9 | -webkit-user-select: none; 10 | -khtml-user-select: none; 11 | -moz-user-select: none; 12 | -ms-user-select: none; 13 | user-select: none 14 | } 15 | .lightSlider:before, .lightSlider:after { 16 | content: " "; 17 | display: table; 18 | } 19 | .lightSlider { 20 | overflow: hidden; 21 | margin: 0; 22 | } 23 | .lSSlideWrapper { 24 | max-width: 100%; 25 | overflow: hidden; 26 | position: relative; 27 | } 28 | .lSSlideWrapper > .lightSlider:after { 29 | clear: both; 30 | } 31 | .lSSlideWrapper .lSSlide { 32 | -webkit-transform: translate(0px, 0px); 33 | -ms-transform: translate(0px, 0px); 34 | transform: translate(0px, 0px); 35 | -webkit-transition: all 1s; 36 | -webkit-transition-property: -webkit-transform,height; 37 | -moz-transition-property: -moz-transform,height; 38 | transition-property: transform,height; 39 | -webkit-transition-duration: inherit !important; 40 | transition-duration: inherit !important; 41 | -webkit-transition-timing-function: inherit !important; 42 | transition-timing-function: inherit !important; 43 | } 44 | .lSSlideWrapper .lSFade { 45 | position: relative; 46 | } 47 | .lSSlideWrapper .lSFade > * { 48 | position: absolute !important; 49 | top: 0; 50 | left: 0; 51 | z-index: 9; 52 | margin-right: 0; 53 | width: 100%; 54 | } 55 | .lSSlideWrapper.usingCss .lSFade > * { 56 | opacity: 0; 57 | -webkit-transition-delay: 0s; 58 | transition-delay: 0s; 59 | -webkit-transition-duration: inherit !important; 60 | transition-duration: inherit !important; 61 | -webkit-transition-property: opacity; 62 | transition-property: opacity; 63 | -webkit-transition-timing-function: inherit !important; 64 | transition-timing-function: inherit !important; 65 | } 66 | .lSSlideWrapper .lSFade > *.active { 67 | z-index: 10; 68 | } 69 | .lSSlideWrapper.usingCss .lSFade > *.active { 70 | opacity: 1; 71 | } 72 | /** /!!! End of core css Should not edit !!!/**/ 73 | 74 | /* Pager */ 75 | .lSSlideOuter .lSPager.lSpg { 76 | margin: 10px 0 0; 77 | padding: 0; 78 | text-align: center; 79 | } 80 | .lSSlideOuter .lSPager.lSpg > li { 81 | cursor: pointer; 82 | display: inline-block; 83 | padding: 0 5px; 84 | } 85 | .lSSlideOuter .lSPager.lSpg > li a { 86 | background-color: #222222; 87 | border-radius: 30px; 88 | display: inline-block; 89 | height: 8px; 90 | overflow: hidden; 91 | text-indent: -999em; 92 | width: 8px; 93 | position: relative; 94 | z-index: 99; 95 | -webkit-transition: all 0.5s linear 0s; 96 | transition: all 0.5s linear 0s; 97 | } 98 | .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a { 99 | background-color: #428bca; 100 | } 101 | .lSSlideOuter .media { 102 | opacity: 0.8; 103 | } 104 | .lSSlideOuter .media.active { 105 | opacity: 1; 106 | } 107 | /* End of pager */ 108 | 109 | /** Gallery */ 110 | .lSSlideOuter .lSPager.lSGallery { 111 | list-style: none outside none; 112 | padding-left: 0; 113 | margin: 0; 114 | overflow: hidden; 115 | transform: translate3d(0px, 0px, 0px); 116 | -moz-transform: translate3d(0px, 0px, 0px); 117 | -ms-transform: translate3d(0px, 0px, 0px); 118 | -webkit-transform: translate3d(0px, 0px, 0px); 119 | -o-transform: translate3d(0px, 0px, 0px); 120 | -webkit-transition-property: -webkit-transform; 121 | -moz-transition-property: -moz-transform; 122 | -webkit-touch-callout: none; 123 | -webkit-user-select: none; 124 | -khtml-user-select: none; 125 | -moz-user-select: none; 126 | -ms-user-select: none; 127 | user-select: none; 128 | } 129 | .lSSlideOuter .lSPager.lSGallery li { 130 | overflow: hidden; 131 | -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s; 132 | transition: border-radius 0.12s linear 0s 0.35s linear 0s; 133 | } 134 | .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover { 135 | border-radius: 5px; 136 | } 137 | .lSSlideOuter .lSPager.lSGallery img { 138 | display: block; 139 | height: auto; 140 | max-width: 100%; 141 | } 142 | .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after { 143 | content: " "; 144 | display: table; 145 | } 146 | .lSSlideOuter .lSPager.lSGallery:after { 147 | clear: both; 148 | } 149 | /* End of Gallery*/ 150 | 151 | /* slider actions */ 152 | .lSAction > a { 153 | width: 32px; 154 | display: block; 155 | top: 50%; 156 | height: 32px; 157 | background-image: url('../img/controls.png'); 158 | cursor: pointer; 159 | position: absolute; 160 | z-index: 99; 161 | margin-top: -16px; 162 | opacity: 0.5; 163 | -webkit-transition: opacity 0.35s linear 0s; 164 | transition: opacity 0.35s linear 0s; 165 | } 166 | .lSAction > a:hover { 167 | opacity: 1; 168 | } 169 | .lSAction > .lSPrev { 170 | background-position: 0 0; 171 | left: 10px; 172 | } 173 | .lSAction > .lSNext { 174 | background-position: -32px 0; 175 | right: 10px; 176 | } 177 | .lSAction > a.disabled { 178 | pointer-events: none; 179 | } 180 | .cS-hidden { 181 | height: 1px; 182 | opacity: 0; 183 | filter: alpha(opacity=0); 184 | overflow: hidden; 185 | } 186 | 187 | 188 | /* vertical */ 189 | .lSSlideOuter.vertical { 190 | position: relative; 191 | } 192 | .lSSlideOuter.vertical.noPager { 193 | padding-right: 0px !important; 194 | } 195 | .lSSlideOuter.vertical .lSGallery { 196 | position: absolute !important; 197 | right: 0; 198 | top: 0; 199 | } 200 | .lSSlideOuter.vertical .lightSlider > * { 201 | width: 100% !important; 202 | max-width: none !important; 203 | } 204 | 205 | /* vertical controlls */ 206 | .lSSlideOuter.vertical .lSAction > a { 207 | left: 50%; 208 | margin-left: -14px; 209 | margin-top: 0; 210 | } 211 | .lSSlideOuter.vertical .lSAction > .lSNext { 212 | background-position: 31px -31px; 213 | bottom: 10px; 214 | top: auto; 215 | } 216 | .lSSlideOuter.vertical .lSAction > .lSPrev { 217 | background-position: 0 -31px; 218 | bottom: auto; 219 | top: 10px; 220 | } 221 | /* vertical */ 222 | 223 | 224 | /* Rtl */ 225 | .lSSlideOuter.lSrtl { 226 | direction: rtl; 227 | } 228 | .lSSlideOuter .lightSlider, .lSSlideOuter .lSPager { 229 | padding-left: 0; 230 | list-style: none outside none; 231 | } 232 | .lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager { 233 | padding-right: 0; 234 | } 235 | .lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li { 236 | float: left; 237 | } 238 | .lSSlideOuter.lSrtl .lightSlider > *, .lSSlideOuter.lSrtl .lSGallery li { 239 | float: right !important; 240 | } 241 | /* Rtl */ 242 | 243 | @-webkit-keyframes rightEnd { 244 | 0% { 245 | left: 0; 246 | } 247 | 248 | 50% { 249 | left: -15px; 250 | } 251 | 252 | 100% { 253 | left: 0; 254 | } 255 | } 256 | @keyframes rightEnd { 257 | 0% { 258 | left: 0; 259 | } 260 | 261 | 50% { 262 | left: -15px; 263 | } 264 | 265 | 100% { 266 | left: 0; 267 | } 268 | } 269 | @-webkit-keyframes topEnd { 270 | 0% { 271 | top: 0; 272 | } 273 | 274 | 50% { 275 | top: -15px; 276 | } 277 | 278 | 100% { 279 | top: 0; 280 | } 281 | } 282 | @keyframes topEnd { 283 | 0% { 284 | top: 0; 285 | } 286 | 287 | 50% { 288 | top: -15px; 289 | } 290 | 291 | 100% { 292 | top: 0; 293 | } 294 | } 295 | @-webkit-keyframes leftEnd { 296 | 0% { 297 | left: 0; 298 | } 299 | 300 | 50% { 301 | left: 15px; 302 | } 303 | 304 | 100% { 305 | left: 0; 306 | } 307 | } 308 | @keyframes leftEnd { 309 | 0% { 310 | left: 0; 311 | } 312 | 313 | 50% { 314 | left: 15px; 315 | } 316 | 317 | 100% { 318 | left: 0; 319 | } 320 | } 321 | @-webkit-keyframes bottomEnd { 322 | 0% { 323 | bottom: 0; 324 | } 325 | 326 | 50% { 327 | bottom: -15px; 328 | } 329 | 330 | 100% { 331 | bottom: 0; 332 | } 333 | } 334 | @keyframes bottomEnd { 335 | 0% { 336 | bottom: 0; 337 | } 338 | 339 | 50% { 340 | bottom: -15px; 341 | } 342 | 343 | 100% { 344 | bottom: 0; 345 | } 346 | } 347 | .lSSlideOuter .rightEnd { 348 | -webkit-animation: rightEnd 0.3s; 349 | animation: rightEnd 0.3s; 350 | position: relative; 351 | } 352 | .lSSlideOuter .leftEnd { 353 | -webkit-animation: leftEnd 0.3s; 354 | animation: leftEnd 0.3s; 355 | position: relative; 356 | } 357 | .lSSlideOuter.vertical .rightEnd { 358 | -webkit-animation: topEnd 0.3s; 359 | animation: topEnd 0.3s; 360 | position: relative; 361 | } 362 | .lSSlideOuter.vertical .leftEnd { 363 | -webkit-animation: bottomEnd 0.3s; 364 | animation: bottomEnd 0.3s; 365 | position: relative; 366 | } 367 | .lSSlideOuter.lSrtl .rightEnd { 368 | -webkit-animation: leftEnd 0.3s; 369 | animation: leftEnd 0.3s; 370 | position: relative; 371 | } 372 | .lSSlideOuter.lSrtl .leftEnd { 373 | -webkit-animation: rightEnd 0.3s; 374 | animation: rightEnd 0.3s; 375 | position: relative; 376 | } 377 | /*/ GRab cursor */ 378 | .lightSlider.lsGrab > * { 379 | cursor: -webkit-grab; 380 | cursor: -moz-grab; 381 | cursor: -o-grab; 382 | cursor: -ms-grab; 383 | cursor: grab; 384 | } 385 | .lightSlider.lsGrabbing > * { 386 | cursor: move; 387 | cursor: -webkit-grabbing; 388 | cursor: -moz-grabbing; 389 | cursor: -o-grabbing; 390 | cursor: -ms-grabbing; 391 | cursor: grabbing; 392 | } -------------------------------------------------------------------------------- /src/img/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinchoolur/lightslider/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/src/img/controls.png -------------------------------------------------------------------------------- /src/js/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 4, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "undef": true, 16 | "unused": true, 17 | "predef": ["jQuery"], 18 | "strict": true 19 | } 20 | 21 | -------------------------------------------------------------------------------- /src/js/lightslider.js: -------------------------------------------------------------------------------- 1 | (function ($, undefined) { 2 | 'use strict'; 3 | var defaults = { 4 | item: 3, 5 | autoWidth: false, 6 | slideMove: 1, 7 | slideMargin: 10, 8 | addClass: '', 9 | mode: 'slide', 10 | useCSS: true, 11 | cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)', 12 | easing: 'linear', //'for jquery animation',// 13 | speed: 400, //ms' 14 | auto: false, 15 | pauseOnHover: false, 16 | loop: false, 17 | slideEndAnimation: true, 18 | pause: 2000, 19 | keyPress: false, 20 | controls: true, 21 | prevHtml: '', 22 | nextHtml: '', 23 | rtl: false, 24 | adaptiveHeight: false, 25 | vertical: false, 26 | verticalHeight: 500, 27 | vThumbWidth: 100, 28 | thumbItem: 10, 29 | pager: true, 30 | gallery: false, 31 | galleryMargin: 5, 32 | thumbMargin: 5, 33 | currentPagerPosition: 'middle', 34 | enableTouch: true, 35 | enableDrag: true, 36 | freeMove: true, 37 | swipeThreshold: 40, 38 | responsive: [], 39 | /* jshint ignore:start */ 40 | onBeforeStart: function ($el) {}, 41 | onSliderLoad: function ($el) {}, 42 | onBeforeSlide: function ($el, scene) {}, 43 | onAfterSlide: function ($el, scene) {}, 44 | onBeforeNextSlide: function ($el, scene) {}, 45 | onBeforePrevSlide: function ($el, scene) {} 46 | /* jshint ignore:end */ 47 | }; 48 | $.fn.lightSlider = function (options) { 49 | if (this.length === 0) { 50 | return this; 51 | } 52 | 53 | if (this.length > 1) { 54 | this.each(function () { 55 | $(this).lightSlider(options); 56 | }); 57 | return this; 58 | } 59 | 60 | var plugin = {}, 61 | settings = $.extend(true, {}, defaults, options), 62 | settingsTemp = {}, 63 | $el = this; 64 | plugin.$el = this; 65 | 66 | if (settings.mode === 'fade') { 67 | settings.vertical = false; 68 | } 69 | var $children = $el.children(), 70 | windowW = $(window).width(), 71 | breakpoint = null, 72 | resposiveObj = null, 73 | length = 0, 74 | w = 0, 75 | on = false, 76 | elSize = 0, 77 | $slide = '', 78 | scene = 0, 79 | property = (settings.vertical === true) ? 'height' : 'width', 80 | gutter = (settings.vertical === true) ? 'margin-bottom' : 'margin-right', 81 | slideValue = 0, 82 | pagerWidth = 0, 83 | slideWidth = 0, 84 | thumbWidth = 0, 85 | interval = null, 86 | isTouch = ('ontouchstart' in document.documentElement); 87 | var refresh = {}; 88 | 89 | refresh.chbreakpoint = function () { 90 | windowW = $(window).width(); 91 | if (settings.responsive.length) { 92 | var item; 93 | if (settings.autoWidth === false) { 94 | item = settings.item; 95 | } 96 | if (windowW < settings.responsive[0].breakpoint) { 97 | for (var i = 0; i < settings.responsive.length; i++) { 98 | if (windowW < settings.responsive[i].breakpoint) { 99 | breakpoint = settings.responsive[i].breakpoint; 100 | resposiveObj = settings.responsive[i]; 101 | } 102 | } 103 | } 104 | if (typeof resposiveObj !== 'undefined' && resposiveObj !== null) { 105 | for (var j in resposiveObj.settings) { 106 | if (resposiveObj.settings.hasOwnProperty(j)) { 107 | if (typeof settingsTemp[j] === 'undefined' || settingsTemp[j] === null) { 108 | settingsTemp[j] = settings[j]; 109 | } 110 | settings[j] = resposiveObj.settings[j]; 111 | } 112 | } 113 | } 114 | if (!$.isEmptyObject(settingsTemp) && windowW > settings.responsive[0].breakpoint) { 115 | for (var k in settingsTemp) { 116 | if (settingsTemp.hasOwnProperty(k)) { 117 | settings[k] = settingsTemp[k]; 118 | } 119 | } 120 | } 121 | if (settings.autoWidth === false) { 122 | if (slideValue > 0 && slideWidth > 0) { 123 | if (item !== settings.item) { 124 | scene = Math.round(slideValue / ((slideWidth + settings.slideMargin) * settings.slideMove)); 125 | } 126 | } 127 | } 128 | } 129 | }; 130 | 131 | refresh.calSW = function () { 132 | if (settings.autoWidth === false) { 133 | slideWidth = (elSize - ((settings.item * (settings.slideMargin)) - settings.slideMargin)) / settings.item; 134 | } 135 | }; 136 | 137 | refresh.calWidth = function (cln) { 138 | var ln = cln === true ? $slide.find('.lslide').length : $children.length; 139 | if (settings.autoWidth === false) { 140 | w = ln * (slideWidth + settings.slideMargin); 141 | } else { 142 | w = 0; 143 | for (var i = 0; i < ln; i++) { 144 | w += (parseInt($children.eq(i).width()) + settings.slideMargin); 145 | } 146 | } 147 | return w; 148 | }; 149 | plugin = { 150 | doCss: function () { 151 | var support = function () { 152 | var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition']; 153 | var root = document.documentElement; 154 | for (var i = 0; i < transition.length; i++) { 155 | if (transition[i] in root.style) { 156 | return true; 157 | } 158 | } 159 | }; 160 | if (settings.useCSS && support()) { 161 | return true; 162 | } 163 | return false; 164 | }, 165 | keyPress: function () { 166 | if (settings.keyPress) { 167 | $(document).on('keyup.lightslider', function (e) { 168 | if (!$(':focus').is('input, textarea')) { 169 | if (e.preventDefault) { 170 | e.preventDefault(); 171 | } else { 172 | e.returnValue = false; 173 | } 174 | if (e.keyCode === 37) { 175 | $el.goToPrevSlide(); 176 | } else if (e.keyCode === 39) { 177 | $el.goToNextSlide(); 178 | } 179 | } 180 | }); 181 | } 182 | }, 183 | controls: function () { 184 | if (settings.controls) { 185 | $el.after('
      ' + settings.prevHtml + '' + settings.nextHtml + '
      '); 186 | if (!settings.autoWidth) { 187 | if (length <= settings.item) { 188 | $slide.find('.lSAction').hide(); 189 | } 190 | } else { 191 | if (refresh.calWidth(false) < elSize) { 192 | $slide.find('.lSAction').hide(); 193 | } 194 | } 195 | $slide.find('.lSAction a').on('click', function (e) { 196 | if (e.preventDefault) { 197 | e.preventDefault(); 198 | } else { 199 | e.returnValue = false; 200 | } 201 | if ($(this).attr('class') === 'lSPrev') { 202 | $el.goToPrevSlide(); 203 | } else { 204 | $el.goToNextSlide(); 205 | } 206 | return false; 207 | }); 208 | } 209 | }, 210 | initialStyle: function () { 211 | var $this = this; 212 | if (settings.mode === 'fade') { 213 | settings.autoWidth = false; 214 | settings.slideEndAnimation = false; 215 | } 216 | if (settings.auto) { 217 | settings.slideEndAnimation = false; 218 | } 219 | if (settings.autoWidth) { 220 | settings.slideMove = 1; 221 | settings.item = 1; 222 | } 223 | if (settings.loop) { 224 | settings.slideMove = 1; 225 | settings.freeMove = false; 226 | } 227 | settings.onBeforeStart.call(this, $el); 228 | refresh.chbreakpoint(); 229 | $el.addClass('lightSlider').wrap('
      '); 230 | $slide = $el.parent('.lSSlideWrapper'); 231 | if (settings.rtl === true) { 232 | $slide.parent().addClass('lSrtl'); 233 | } 234 | if (settings.vertical) { 235 | $slide.parent().addClass('vertical'); 236 | elSize = settings.verticalHeight; 237 | $slide.css('height', elSize + 'px'); 238 | } else { 239 | elSize = $el.outerWidth(); 240 | } 241 | $children.addClass('lslide'); 242 | if (settings.loop === true && settings.mode === 'slide') { 243 | refresh.calSW(); 244 | refresh.clone = function () { 245 | if (refresh.calWidth(true) > elSize) { 246 | /**/ 247 | var tWr = 0, 248 | tI = 0; 249 | for (var k = 0; k < $children.length; k++) { 250 | tWr += (parseInt($el.find('.lslide').eq(k).width()) + settings.slideMargin); 251 | tI++; 252 | if (tWr >= (elSize + settings.slideMargin)) { 253 | break; 254 | } 255 | } 256 | var tItem = settings.autoWidth === true ? tI : settings.item; 257 | 258 | /**/ 259 | if (tItem < $el.find('.clone.left').length) { 260 | for (var i = 0; i < $el.find('.clone.left').length - tItem; i++) { 261 | $children.eq(i).remove(); 262 | } 263 | } 264 | if (tItem < $el.find('.clone.right').length) { 265 | for (var j = $children.length - 1; j > ($children.length - 1 - $el.find('.clone.right').length); j--) { 266 | scene--; 267 | $children.eq(j).remove(); 268 | } 269 | } 270 | /**/ 271 | for (var n = $el.find('.clone.right').length; n < tItem; n++) { 272 | $el.find('.lslide').eq(n).clone().removeClass('lslide').addClass('clone right').appendTo($el); 273 | scene++; 274 | } 275 | for (var m = $el.find('.lslide').length - $el.find('.clone.left').length; m > ($el.find('.lslide').length - tItem); m--) { 276 | $el.find('.lslide').eq(m - 1).clone().removeClass('lslide').addClass('clone left').prependTo($el); 277 | } 278 | $children = $el.children(); 279 | } else { 280 | if ($children.hasClass('clone')) { 281 | $el.find('.clone').remove(); 282 | $this.move($el, 0); 283 | } 284 | } 285 | }; 286 | refresh.clone(); 287 | } 288 | refresh.sSW = function () { 289 | length = $children.length; 290 | if (settings.rtl === true && settings.vertical === false) { 291 | gutter = 'margin-left'; 292 | } 293 | if (settings.autoWidth === false) { 294 | $children.css(property, slideWidth + 'px'); 295 | } 296 | $children.css(gutter, settings.slideMargin + 'px'); 297 | w = refresh.calWidth(false); 298 | $el.css(property, w + 'px'); 299 | if (settings.loop === true && settings.mode === 'slide') { 300 | if (on === false) { 301 | scene = $el.find('.clone.left').length; 302 | } 303 | } 304 | }; 305 | refresh.calL = function () { 306 | $children = $el.children(); 307 | length = $children.length; 308 | }; 309 | if (this.doCss()) { 310 | $slide.addClass('usingCss'); 311 | } 312 | refresh.calL(); 313 | if (settings.mode === 'slide') { 314 | refresh.calSW(); 315 | refresh.sSW(); 316 | if (settings.loop === true) { 317 | slideValue = $this.slideValue(); 318 | this.move($el, slideValue); 319 | } 320 | if (settings.vertical === false) { 321 | this.setHeight($el, false); 322 | } 323 | 324 | } else { 325 | this.setHeight($el, true); 326 | $el.addClass('lSFade'); 327 | if (!this.doCss()) { 328 | $children.fadeOut(0); 329 | $children.eq(scene).fadeIn(0); 330 | } 331 | } 332 | if (settings.loop === true && settings.mode === 'slide') { 333 | $children.eq(scene).addClass('active'); 334 | } else { 335 | $children.first().addClass('active'); 336 | } 337 | }, 338 | pager: function () { 339 | var $this = this; 340 | refresh.createPager = function () { 341 | thumbWidth = (elSize - ((settings.thumbItem * (settings.thumbMargin)) - settings.thumbMargin)) / settings.thumbItem; 342 | var $children = $slide.find('.lslide'); 343 | var length = $slide.find('.lslide').length; 344 | var i = 0, 345 | pagers = '', 346 | v = 0; 347 | for (i = 0; i < length; i++) { 348 | if (settings.mode === 'slide') { 349 | // calculate scene * slide value 350 | if (!settings.autoWidth) { 351 | v = i * ((slideWidth + settings.slideMargin) * settings.slideMove); 352 | } else { 353 | v += ((parseInt($children.eq(i).width()) + settings.slideMargin) * settings.slideMove); 354 | } 355 | } 356 | var thumb = $children.eq(i * settings.slideMove).attr('data-thumb'); 357 | if (settings.gallery === true) { 358 | pagers += '
      • '; 359 | } else { 360 | pagers += '
    • ' + (i + 1) + '
      • '; 361 | } 362 | if (settings.mode === 'slide') { 363 | if ((v) >= w - elSize - settings.slideMargin) { 364 | i = i + 1; 365 | var minPgr = 2; 366 | if (settings.autoWidth) { 367 | pagers += '
    • ' + (i + 1) + '
      • '; 368 | minPgr = 1; 369 | } 370 | if (i < minPgr) { 371 | pagers = null; 372 | $slide.parent().addClass('noPager'); 373 | } else { 374 | $slide.parent().removeClass('noPager'); 375 | } 376 | break; 377 | } 378 | } 379 | } 380 | var $cSouter = $slide.parent(); 381 | $cSouter.find('.lSPager').html(pagers); 382 | if (settings.gallery === true) { 383 | if (settings.vertical === true) { 384 | // set Gallery thumbnail width 385 | $cSouter.find('.lSPager').css('width', settings.vThumbWidth + 'px'); 386 | } 387 | pagerWidth = (i * (settings.thumbMargin + thumbWidth)) + 0.5; 388 | $cSouter.find('.lSPager').css({ 389 | property: pagerWidth + 'px', 390 | 'transition-duration': settings.speed + 'ms' 391 | }); 392 | if (settings.vertical === true) { 393 | $slide.parent().css('padding-right', (settings.vThumbWidth + settings.galleryMargin) + 'px'); 394 | } 395 | $cSouter.find('.lSPager').css(property, pagerWidth + 'px'); 396 | } 397 | var $pager = $cSouter.find('.lSPager').find('li'); 398 | $pager.first().addClass('active'); 399 | $pager.on('click', function () { 400 | if (settings.loop === true && settings.mode === 'slide') { 401 | scene = scene + ($pager.index(this) - $cSouter.find('.lSPager').find('li.active').index()); 402 | } else { 403 | scene = $pager.index(this); 404 | } 405 | $el.mode(false); 406 | if (settings.gallery === true) { 407 | $this.slideThumb(); 408 | } 409 | return false; 410 | }); 411 | }; 412 | if (settings.pager) { 413 | var cl = 'lSpg'; 414 | if (settings.gallery) { 415 | cl = 'lSGallery'; 416 | } 417 | $slide.after('
        '); 418 | var gMargin = (settings.vertical) ? 'margin-left' : 'margin-top'; 419 | $slide.parent().find('.lSPager').css(gMargin, settings.galleryMargin + 'px'); 420 | refresh.createPager(); 421 | } 422 | 423 | setTimeout(function () { 424 | refresh.init(); 425 | }, 0); 426 | }, 427 | setHeight: function (ob, fade) { 428 | var obj = null, 429 | $this = this; 430 | if (settings.loop) { 431 | obj = ob.children('.lslide ').first(); 432 | } else { 433 | obj = ob.children().first(); 434 | } 435 | var setCss = function () { 436 | var tH = obj.outerHeight(), 437 | tP = 0, 438 | tHT = tH; 439 | if (fade) { 440 | tH = 0; 441 | tP = ((tHT) * 100) / elSize; 442 | } 443 | ob.css({ 444 | 'height': tH + 'px', 445 | 'padding-bottom': tP + '%' 446 | }); 447 | }; 448 | setCss(); 449 | if (obj.find('img').length) { 450 | if ( obj.find('img')[0].complete) { 451 | setCss(); 452 | if (!interval) { 453 | $this.auto(); 454 | } 455 | }else{ 456 | obj.find('img').on('load', function () { 457 | setTimeout(function () { 458 | setCss(); 459 | if (!interval) { 460 | $this.auto(); 461 | } 462 | }, 100); 463 | }); 464 | } 465 | }else{ 466 | if (!interval) { 467 | $this.auto(); 468 | } 469 | } 470 | }, 471 | active: function (ob, t) { 472 | if (this.doCss() && settings.mode === 'fade') { 473 | $slide.addClass('on'); 474 | } 475 | var sc = 0; 476 | if (scene * settings.slideMove < length) { 477 | ob.removeClass('active'); 478 | if (!this.doCss() && settings.mode === 'fade' && t === false) { 479 | ob.fadeOut(settings.speed); 480 | } 481 | if (t === true) { 482 | sc = scene; 483 | } else { 484 | sc = scene * settings.slideMove; 485 | } 486 | //t === true ? sc = scene : sc = scene * settings.slideMove; 487 | var l, nl; 488 | if (t === true) { 489 | l = ob.length; 490 | nl = l - 1; 491 | if (sc + 1 >= l) { 492 | sc = nl; 493 | } 494 | } 495 | if (settings.loop === true && settings.mode === 'slide') { 496 | //t === true ? sc = scene - $el.find('.clone.left').length : sc = scene * settings.slideMove; 497 | if (t === true) { 498 | sc = scene - $el.find('.clone.left').length; 499 | } else { 500 | sc = scene * settings.slideMove; 501 | } 502 | if (t === true) { 503 | l = ob.length; 504 | nl = l - 1; 505 | if (sc + 1 === l) { 506 | sc = nl; 507 | } else if (sc + 1 > l) { 508 | sc = 0; 509 | } 510 | } 511 | } 512 | 513 | if (!this.doCss() && settings.mode === 'fade' && t === false) { 514 | ob.eq(sc).fadeIn(settings.speed); 515 | } 516 | ob.eq(sc).addClass('active'); 517 | } else { 518 | ob.removeClass('active'); 519 | ob.eq(ob.length - 1).addClass('active'); 520 | if (!this.doCss() && settings.mode === 'fade' && t === false) { 521 | ob.fadeOut(settings.speed); 522 | ob.eq(sc).fadeIn(settings.speed); 523 | } 524 | } 525 | }, 526 | move: function (ob, v) { 527 | if (settings.rtl === true) { 528 | v = -v; 529 | } 530 | if (this.doCss()) { 531 | if (settings.vertical === true) { 532 | ob.css({ 533 | 'transform': 'translate3d(0px, ' + (-v) + 'px, 0px)', 534 | '-webkit-transform': 'translate3d(0px, ' + (-v) + 'px, 0px)' 535 | }); 536 | } else { 537 | ob.css({ 538 | 'transform': 'translate3d(' + (-v) + 'px, 0px, 0px)', 539 | '-webkit-transform': 'translate3d(' + (-v) + 'px, 0px, 0px)', 540 | }); 541 | } 542 | } else { 543 | if (settings.vertical === true) { 544 | ob.css('position', 'relative').animate({ 545 | top: -v + 'px' 546 | }, settings.speed, settings.easing); 547 | } else { 548 | ob.css('position', 'relative').animate({ 549 | left: -v + 'px' 550 | }, settings.speed, settings.easing); 551 | } 552 | } 553 | var $thumb = $slide.parent().find('.lSPager').find('li'); 554 | this.active($thumb, true); 555 | }, 556 | fade: function () { 557 | this.active($children, false); 558 | var $thumb = $slide.parent().find('.lSPager').find('li'); 559 | this.active($thumb, true); 560 | }, 561 | slide: function () { 562 | var $this = this; 563 | refresh.calSlide = function () { 564 | if (w > elSize) { 565 | slideValue = $this.slideValue(); 566 | $this.active($children, false); 567 | if ((slideValue) > w - elSize - settings.slideMargin) { 568 | slideValue = w - elSize - settings.slideMargin; 569 | } else if (slideValue < 0) { 570 | slideValue = 0; 571 | } 572 | $this.move($el, slideValue); 573 | if (settings.loop === true && settings.mode === 'slide') { 574 | if (scene >= (length - ($el.find('.clone.left').length / settings.slideMove))) { 575 | $this.resetSlide($el.find('.clone.left').length); 576 | } 577 | if (scene === 0) { 578 | $this.resetSlide($slide.find('.lslide').length); 579 | } 580 | } 581 | } 582 | }; 583 | refresh.calSlide(); 584 | }, 585 | resetSlide: function (s) { 586 | var $this = this; 587 | $slide.find('.lSAction a').addClass('disabled'); 588 | setTimeout(function () { 589 | scene = s; 590 | $slide.css('transition-duration', '0ms'); 591 | slideValue = $this.slideValue(); 592 | $this.active($children, false); 593 | plugin.move($el, slideValue); 594 | setTimeout(function () { 595 | $slide.css('transition-duration', settings.speed + 'ms'); 596 | $slide.find('.lSAction a').removeClass('disabled'); 597 | }, 50); 598 | }, settings.speed + 100); 599 | }, 600 | slideValue: function () { 601 | var _sV = 0; 602 | if (settings.autoWidth === false) { 603 | _sV = scene * ((slideWidth + settings.slideMargin) * settings.slideMove); 604 | } else { 605 | _sV = 0; 606 | for (var i = 0; i < scene; i++) { 607 | _sV += (parseInt($children.eq(i).width()) + settings.slideMargin); 608 | } 609 | } 610 | return _sV; 611 | }, 612 | slideThumb: function () { 613 | var position; 614 | switch (settings.currentPagerPosition) { 615 | case 'left': 616 | position = 0; 617 | break; 618 | case 'middle': 619 | position = (elSize / 2) - (thumbWidth / 2); 620 | break; 621 | case 'right': 622 | position = elSize - thumbWidth; 623 | } 624 | var sc = scene - $el.find('.clone.left').length; 625 | var $pager = $slide.parent().find('.lSPager'); 626 | if (settings.mode === 'slide' && settings.loop === true) { 627 | if (sc >= $pager.children().length) { 628 | sc = 0; 629 | } else if (sc < 0) { 630 | sc = $pager.children().length; 631 | } 632 | } 633 | var thumbSlide = sc * ((thumbWidth + settings.thumbMargin)) - (position); 634 | if ((thumbSlide + elSize) > pagerWidth) { 635 | thumbSlide = pagerWidth - elSize - settings.thumbMargin; 636 | } 637 | if (thumbSlide < 0) { 638 | thumbSlide = 0; 639 | } 640 | this.move($pager, thumbSlide); 641 | }, 642 | auto: function () { 643 | if (settings.auto) { 644 | clearInterval(interval); 645 | interval = setInterval(function () { 646 | $el.goToNextSlide(); 647 | }, settings.pause); 648 | } 649 | }, 650 | pauseOnHover: function(){ 651 | var $this = this; 652 | if (settings.auto && settings.pauseOnHover) { 653 | $slide.on('mouseenter', function(){ 654 | $(this).addClass('ls-hover'); 655 | $el.pause(); 656 | settings.auto = true; 657 | }); 658 | $slide.on('mouseleave',function(){ 659 | $(this).removeClass('ls-hover'); 660 | if (!$slide.find('.lightSlider').hasClass('lsGrabbing')) { 661 | $this.auto(); 662 | } 663 | }); 664 | } 665 | }, 666 | touchMove: function (endCoords, startCoords) { 667 | $slide.css('transition-duration', '0ms'); 668 | if (settings.mode === 'slide') { 669 | var distance = endCoords - startCoords; 670 | var swipeVal = slideValue - distance; 671 | if ((swipeVal) >= w - elSize - settings.slideMargin) { 672 | if (settings.freeMove === false) { 673 | swipeVal = w - elSize - settings.slideMargin; 674 | } else { 675 | var swipeValT = w - elSize - settings.slideMargin; 676 | swipeVal = swipeValT + ((swipeVal - swipeValT) / 5); 677 | 678 | } 679 | } else if (swipeVal < 0) { 680 | if (settings.freeMove === false) { 681 | swipeVal = 0; 682 | } else { 683 | swipeVal = swipeVal / 5; 684 | } 685 | } 686 | this.move($el, swipeVal); 687 | } 688 | }, 689 | 690 | touchEnd: function (distance) { 691 | $slide.css('transition-duration', settings.speed + 'ms'); 692 | if (settings.mode === 'slide') { 693 | var mxVal = false; 694 | var _next = true; 695 | slideValue = slideValue - distance; 696 | if ((slideValue) > w - elSize - settings.slideMargin) { 697 | slideValue = w - elSize - settings.slideMargin; 698 | if (settings.autoWidth === false) { 699 | mxVal = true; 700 | } 701 | } else if (slideValue < 0) { 702 | slideValue = 0; 703 | } 704 | var gC = function (next) { 705 | var ad = 0; 706 | if (!mxVal) { 707 | if (next) { 708 | ad = 1; 709 | } 710 | } 711 | if (!settings.autoWidth) { 712 | var num = slideValue / ((slideWidth + settings.slideMargin) * settings.slideMove); 713 | scene = parseInt(num) + ad; 714 | if (slideValue >= (w - elSize - settings.slideMargin)) { 715 | if (num % 1 !== 0) { 716 | scene++; 717 | } 718 | } 719 | } else { 720 | var tW = 0; 721 | for (var i = 0; i < $children.length; i++) { 722 | tW += (parseInt($children.eq(i).width()) + settings.slideMargin); 723 | scene = i + ad; 724 | if (tW >= slideValue) { 725 | break; 726 | } 727 | } 728 | } 729 | }; 730 | if (distance >= settings.swipeThreshold) { 731 | gC(false); 732 | _next = false; 733 | } else if (distance <= -settings.swipeThreshold) { 734 | gC(true); 735 | _next = false; 736 | } 737 | $el.mode(_next); 738 | this.slideThumb(); 739 | } else { 740 | if (distance >= settings.swipeThreshold) { 741 | $el.goToPrevSlide(); 742 | } else if (distance <= -settings.swipeThreshold) { 743 | $el.goToNextSlide(); 744 | } 745 | } 746 | }, 747 | 748 | 749 | 750 | enableDrag: function () { 751 | var $this = this; 752 | if (!isTouch) { 753 | var startCoords = 0, 754 | endCoords = 0, 755 | isDraging = false; 756 | $slide.find('.lightSlider').addClass('lsGrab'); 757 | $slide.on('mousedown', function (e) { 758 | if (w < elSize) { 759 | if (w !== 0) { 760 | return false; 761 | } 762 | } 763 | if ($(e.target).attr('class') !== ('lSPrev') && $(e.target).attr('class') !== ('lSNext')) { 764 | startCoords = (settings.vertical === true) ? e.pageY : e.pageX; 765 | isDraging = true; 766 | if (e.preventDefault) { 767 | e.preventDefault(); 768 | } else { 769 | e.returnValue = false; 770 | } 771 | // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 772 | $slide.scrollLeft += 1; 773 | $slide.scrollLeft -= 1; 774 | // * 775 | $slide.find('.lightSlider').removeClass('lsGrab').addClass('lsGrabbing'); 776 | clearInterval(interval); 777 | } 778 | }); 779 | $(window).on('mousemove', function (e) { 780 | if (isDraging) { 781 | endCoords = (settings.vertical === true) ? e.pageY : e.pageX; 782 | $this.touchMove(endCoords, startCoords); 783 | } 784 | }); 785 | $(window).on('mouseup', function (e) { 786 | if (isDraging) { 787 | $slide.find('.lightSlider').removeClass('lsGrabbing').addClass('lsGrab'); 788 | isDraging = false; 789 | endCoords = (settings.vertical === true) ? e.pageY : e.pageX; 790 | var distance = endCoords - startCoords; 791 | if (Math.abs(distance) >= settings.swipeThreshold) { 792 | $(window).on('click.ls', function (e) { 793 | if (e.preventDefault) { 794 | e.preventDefault(); 795 | } else { 796 | e.returnValue = false; 797 | } 798 | e.stopImmediatePropagation(); 799 | e.stopPropagation(); 800 | $(window).off('click.ls'); 801 | }); 802 | } 803 | 804 | $this.touchEnd(distance); 805 | 806 | } 807 | }); 808 | } 809 | }, 810 | 811 | 812 | 813 | 814 | enableTouch: function () { 815 | var $this = this; 816 | if (isTouch) { 817 | var startCoords = {}, 818 | endCoords = {}; 819 | $slide.on('touchstart', function (e) { 820 | endCoords = e.originalEvent.targetTouches[0]; 821 | startCoords.pageX = e.originalEvent.targetTouches[0].pageX; 822 | startCoords.pageY = e.originalEvent.targetTouches[0].pageY; 823 | clearInterval(interval); 824 | }); 825 | $slide.on('touchmove', function (e) { 826 | if (w < elSize) { 827 | if (w !== 0) { 828 | return false; 829 | } 830 | } 831 | var orig = e.originalEvent; 832 | endCoords = orig.targetTouches[0]; 833 | var xMovement = Math.abs(endCoords.pageX - startCoords.pageX); 834 | var yMovement = Math.abs(endCoords.pageY - startCoords.pageY); 835 | if (settings.vertical === true) { 836 | if ((yMovement * 3) > xMovement) { 837 | e.preventDefault(); 838 | } 839 | $this.touchMove(endCoords.pageY, startCoords.pageY); 840 | } else { 841 | if ((xMovement * 3) > yMovement) { 842 | e.preventDefault(); 843 | } 844 | $this.touchMove(endCoords.pageX, startCoords.pageX); 845 | } 846 | 847 | }); 848 | $slide.on('touchend', function () { 849 | if (w < elSize) { 850 | if (w !== 0) { 851 | return false; 852 | } 853 | } 854 | var distance; 855 | if (settings.vertical === true) { 856 | distance = endCoords.pageY - startCoords.pageY; 857 | } else { 858 | distance = endCoords.pageX - startCoords.pageX; 859 | } 860 | $this.touchEnd(distance); 861 | }); 862 | } 863 | }, 864 | build: function () { 865 | var $this = this; 866 | $this.initialStyle(); 867 | if (this.doCss()) { 868 | 869 | if (settings.enableTouch === true) { 870 | $this.enableTouch(); 871 | } 872 | if (settings.enableDrag === true) { 873 | $this.enableDrag(); 874 | } 875 | } 876 | 877 | $(window).on('focus', function(){ 878 | $this.auto(); 879 | }); 880 | 881 | $(window).on('blur', function(){ 882 | clearInterval(interval); 883 | }); 884 | 885 | $this.pager(); 886 | $this.pauseOnHover(); 887 | $this.controls(); 888 | $this.keyPress(); 889 | } 890 | }; 891 | plugin.build(); 892 | refresh.init = function () { 893 | refresh.chbreakpoint(); 894 | if (settings.vertical === true) { 895 | if (settings.item > 1) { 896 | elSize = settings.verticalHeight; 897 | } else { 898 | elSize = $children.outerHeight(); 899 | } 900 | $slide.css('height', elSize + 'px'); 901 | } else { 902 | elSize = $slide.outerWidth(); 903 | } 904 | if (settings.loop === true && settings.mode === 'slide') { 905 | refresh.clone(); 906 | } 907 | refresh.calL(); 908 | if (settings.mode === 'slide') { 909 | $el.removeClass('lSSlide'); 910 | } 911 | if (settings.mode === 'slide') { 912 | refresh.calSW(); 913 | refresh.sSW(); 914 | } 915 | setTimeout(function () { 916 | if (settings.mode === 'slide') { 917 | $el.addClass('lSSlide'); 918 | } 919 | }, 1000); 920 | if (settings.pager) { 921 | refresh.createPager(); 922 | } 923 | if (settings.adaptiveHeight === true && settings.vertical === false) { 924 | $el.css('height', $children.eq(scene).outerHeight(true)); 925 | } 926 | if (settings.adaptiveHeight === false) { 927 | if (settings.mode === 'slide') { 928 | if (settings.vertical === false) { 929 | plugin.setHeight($el, false); 930 | }else{ 931 | plugin.auto(); 932 | } 933 | } else { 934 | plugin.setHeight($el, true); 935 | } 936 | } 937 | if (settings.gallery === true) { 938 | plugin.slideThumb(); 939 | } 940 | if (settings.mode === 'slide') { 941 | plugin.slide(); 942 | } 943 | if (settings.autoWidth === false) { 944 | if ($children.length <= settings.item) { 945 | $slide.find('.lSAction').hide(); 946 | } else { 947 | $slide.find('.lSAction').show(); 948 | } 949 | } else { 950 | if ((refresh.calWidth(false) < elSize) && (w !== 0)) { 951 | $slide.find('.lSAction').hide(); 952 | } else { 953 | $slide.find('.lSAction').show(); 954 | } 955 | } 956 | }; 957 | $el.goToPrevSlide = function () { 958 | if (scene > 0) { 959 | settings.onBeforePrevSlide.call(this, $el, scene); 960 | scene--; 961 | $el.mode(false); 962 | if (settings.gallery === true) { 963 | plugin.slideThumb(); 964 | } 965 | } else { 966 | if (settings.loop === true) { 967 | settings.onBeforePrevSlide.call(this, $el, scene); 968 | if (settings.mode === 'fade') { 969 | var l = (length - 1); 970 | scene = parseInt(l / settings.slideMove); 971 | } 972 | $el.mode(false); 973 | if (settings.gallery === true) { 974 | plugin.slideThumb(); 975 | } 976 | } else if (settings.slideEndAnimation === true) { 977 | $el.addClass('leftEnd'); 978 | setTimeout(function () { 979 | $el.removeClass('leftEnd'); 980 | }, 400); 981 | } 982 | } 983 | }; 984 | $el.goToNextSlide = function () { 985 | var nextI = true; 986 | if (settings.mode === 'slide') { 987 | var _slideValue = plugin.slideValue(); 988 | nextI = _slideValue < w - elSize - settings.slideMargin; 989 | } 990 | if (((scene * settings.slideMove) < length - settings.slideMove) && nextI) { 991 | settings.onBeforeNextSlide.call(this, $el, scene); 992 | scene++; 993 | $el.mode(false); 994 | if (settings.gallery === true) { 995 | plugin.slideThumb(); 996 | } 997 | } else { 998 | if (settings.loop === true) { 999 | settings.onBeforeNextSlide.call(this, $el, scene); 1000 | scene = 0; 1001 | $el.mode(false); 1002 | if (settings.gallery === true) { 1003 | plugin.slideThumb(); 1004 | } 1005 | } else if (settings.slideEndAnimation === true) { 1006 | $el.addClass('rightEnd'); 1007 | setTimeout(function () { 1008 | $el.removeClass('rightEnd'); 1009 | }, 400); 1010 | } 1011 | } 1012 | }; 1013 | $el.mode = function (_touch) { 1014 | if (settings.adaptiveHeight === true && settings.vertical === false) { 1015 | $el.css('height', $children.eq(scene).outerHeight(true)); 1016 | } 1017 | if (on === false) { 1018 | if (settings.mode === 'slide') { 1019 | if (plugin.doCss()) { 1020 | $el.addClass('lSSlide'); 1021 | if (settings.speed !== '') { 1022 | $slide.css('transition-duration', settings.speed + 'ms'); 1023 | } 1024 | if (settings.cssEasing !== '') { 1025 | $slide.css('transition-timing-function', settings.cssEasing); 1026 | } 1027 | } 1028 | } else { 1029 | if (plugin.doCss()) { 1030 | if (settings.speed !== '') { 1031 | $el.css('transition-duration', settings.speed + 'ms'); 1032 | } 1033 | if (settings.cssEasing !== '') { 1034 | $el.css('transition-timing-function', settings.cssEasing); 1035 | } 1036 | } 1037 | } 1038 | } 1039 | if (!_touch) { 1040 | settings.onBeforeSlide.call(this, $el, scene); 1041 | } 1042 | if (settings.mode === 'slide') { 1043 | plugin.slide(); 1044 | } else { 1045 | plugin.fade(); 1046 | } 1047 | if (!$slide.hasClass('ls-hover')) { 1048 | plugin.auto(); 1049 | } 1050 | setTimeout(function () { 1051 | if (!_touch) { 1052 | settings.onAfterSlide.call(this, $el, scene); 1053 | } 1054 | }, settings.speed); 1055 | on = true; 1056 | }; 1057 | $el.play = function () { 1058 | $el.goToNextSlide(); 1059 | settings.auto = true; 1060 | plugin.auto(); 1061 | }; 1062 | $el.pause = function () { 1063 | settings.auto = false; 1064 | clearInterval(interval); 1065 | }; 1066 | $el.refresh = function () { 1067 | refresh.init(); 1068 | }; 1069 | $el.getCurrentSlideCount = function () { 1070 | var sc = scene; 1071 | if (settings.loop) { 1072 | var ln = $slide.find('.lslide').length, 1073 | cl = $el.find('.clone.left').length; 1074 | if (scene <= cl - 1) { 1075 | sc = ln + (scene - cl); 1076 | } else if (scene >= (ln + cl)) { 1077 | sc = scene - ln - cl; 1078 | } else { 1079 | sc = scene - cl; 1080 | } 1081 | } 1082 | return sc + 1; 1083 | }; 1084 | $el.getTotalSlideCount = function () { 1085 | return $slide.find('.lslide').length; 1086 | }; 1087 | $el.goToSlide = function (s) { 1088 | if (settings.loop) { 1089 | scene = (s + $el.find('.clone.left').length - 1); 1090 | } else { 1091 | scene = s; 1092 | } 1093 | $el.mode(false); 1094 | if (settings.gallery === true) { 1095 | plugin.slideThumb(); 1096 | } 1097 | }; 1098 | $el.destroy = function () { 1099 | if ($el.lightSlider) { 1100 | $el.goToPrevSlide = function(){}; 1101 | $el.goToNextSlide = function(){}; 1102 | $el.mode = function(){}; 1103 | $el.play = function(){}; 1104 | $el.pause = function(){}; 1105 | $el.refresh = function(){}; 1106 | $el.getCurrentSlideCount = function(){}; 1107 | $el.getTotalSlideCount = function(){}; 1108 | $el.goToSlide = function(){}; 1109 | $el.lightSlider = null; 1110 | refresh = { 1111 | init : function(){} 1112 | }; 1113 | $el.parent().parent().find('.lSAction, .lSPager').remove(); 1114 | $el.removeClass('lightSlider lSFade lSSlide lsGrab lsGrabbing leftEnd right').removeAttr('style').unwrap().unwrap(); 1115 | $el.children().removeAttr('style'); 1116 | $children.removeClass('lslide active'); 1117 | $el.find('.clone').remove(); 1118 | $children = null; 1119 | interval = null; 1120 | on = false; 1121 | scene = 0; 1122 | } 1123 | 1124 | }; 1125 | setTimeout(function () { 1126 | settings.onSliderLoad.call(this, $el); 1127 | }, 10); 1128 | $(window).on('resize orientationchange', function (e) { 1129 | setTimeout(function () { 1130 | if (e.preventDefault) { 1131 | e.preventDefault(); 1132 | } else { 1133 | e.returnValue = false; 1134 | } 1135 | refresh.init(); 1136 | }, 200); 1137 | }); 1138 | return this; 1139 | }; 1140 | }(jQuery)); 1141 | -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "browser": true, 14 | "node": true, 15 | "predef": [ 16 | "jQuery", 17 | "QUnit", 18 | "module", 19 | "test", 20 | "asyncTest", 21 | "expect", 22 | "start", 23 | "stop", 24 | "ok", 25 | "equal", 26 | "notEqual", 27 | "deepEqual", 28 | "notDeepEqual", 29 | "strictEqual", 30 | "notStrictEqual", 31 | "throws" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /test/lightslider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JQuery lightSlider Test Suite 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 |
        21 |
        22 | lame test markup 23 | normal test markup 24 | awesome test markup 25 |
        26 | 27 | -------------------------------------------------------------------------------- /test/lightslider_test.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | test("chainable", function() { 3 | ok($("#qunit-fixture").lightSlider().addClass("chainable"), "can be chained"); 4 | equal($("#qunit-fixture").hasClass("chainable"), true, "class was added correctly from chaining"); 5 | }); 6 | }(jQuery)); --------------------------------------------------------------------------------