├── .gitignore
├── dist
    ├── pureslider.css
    └── pureslider.dist.js
├── gulpfile.js
├── package.json
├── readme.md
├── src
    ├── pureslider.css
    └── pureslider.js
├── webpack.config.dist.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | lib


--------------------------------------------------------------------------------
/dist/pureslider.css:
--------------------------------------------------------------------------------
 1 | #pure-slider{
 2 |   list-style: none;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   overflow: hidden;
 6 |   width: 100%;
 7 |   height: 100%;
 8 |   position: relative;
 9 | }
10 | #pure-slider.fade .ps-item{
11 |   float: left;
12 |   width: 100%;
13 |   height: 100%;
14 |   -webkit-transition: all 2s;
15 |   transition: all 2s;
16 |   position: absolute;
17 |   top: 0;
18 |   bottom: 0;
19 |   right: 0;
20 |   left: 0;
21 |   opacity: 0;
22 | }
23 | #pure-slider.fade .ps-item img{
24 |   width: 100%;
25 |   height: 100%;
26 | }
27 | #pure-slider.fade .ps-item.active{
28 |   -webkit-transition-delay: all 2s;
29 |           transition-delay: all 2s;
30 |   opacity: 1;
31 | }


--------------------------------------------------------------------------------
/dist/pureslider.dist.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.PureSlider=t():e.PureSlider=t()}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=function(){function e(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];n(this,e),this.options={duration:t.duration||2e3,actionMode:t.actionMode||"fade"},this.el=document.querySelector("#pure-slider"),this.activeIndex=0,this.el.children[this.activeIndex].classList.add("active")}return i(e,[{key:"slide",value:function(){var e=this,t={fade:function(){e.el.classList.add("fade"),setInterval(function(){e.el.children[e.activeIndex].classList.remove("active"),e.activeIndex===e.el.children.length-1?(e.activeIndex=0,e.el.children[e.activeIndex].classList.add("active")):(e.el.children[e.activeIndex+1].classList.add("active"),e.activeIndex=e.activeIndex+1)},e.options.duration)}};t[this.options.actionMode]?t[this.options.actionMode]():(t.fade(),console.warn(this.options.actionMode,"is not a valid action mode"))}}]),e}();e.exports=o}])});


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp')
 2 |   , postcss = require('gulp-postcss')
 3 |   , nested = require('postcss-nested')
 4 |   , autoprefixer = require('autoprefixer');
 5 | 
 6 | gulp.task('default', ['dist:style']);
 7 | 
 8 | gulp.task('dist:style', function(){
 9 |   gulp.src('./src/pureslider.css')
10 |     .pipe(postcss([nested, autoprefixer]))
11 |     .pipe(gulp.dest('./dist'));
12 | });
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pureslider",
 3 |   "version": "0.1.0",
 4 |   "description": "Light-weight and no-dependency javascript slider.",
 5 |   "main": "./lib/pureslider.js",
 6 |   "scripts": {
 7 |     "dev": "webpack -w",
 8 |     "dist": "webpack --config ./webpack.config.dist.js -p",
 9 |     "build": "webpack",
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/djyde/PureSlider.git"
15 |   },
16 |   "keywords": [
17 |     "slider",
18 |     "carousel"
19 |   ],
20 |   "author": "Randy Lu <randypriv@gmail.com>",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/djyde/PureSlider/issues"
24 |   },
25 |   "homepage": "https://github.com/djyde/PureSlider#readme",
26 |   "devDependencies": {
27 |     "autoprefixer": "^6.1.1",
28 |     "babel-core": "^6.2.1",
29 |     "babel-loader": "^6.2.0",
30 |     "babel-preset-es2015": "^6.1.18",
31 |     "extract-text-webpack-plugin": "^0.9.1",
32 |     "gulp": "^3.9.0",
33 |     "gulp-postcss": "^6.0.1",
34 |     "postcss-loader": "^0.8.0",
35 |     "postcss-nested": "^1.0.0",
36 |     "webpack": "^1.12.9"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # PureSlider
 2 | 
 3 | [![npm](https://img.shields.io/npm/dt/pureslider.svg?style=flat-square)](https://www.npmjs.com/package/pureslider)
 4 | [![npm](https://img.shields.io/npm/v/pureslider.svg?style=flat-square)](https://www.npmjs.com/package/pureslider)
 5 | [![npm](https://img.shields.io/npm/l/pureslider.svg?style=flat-square)](https://www.npmjs.com/package/pureslider)
 6 | 
 7 | A lightweight, no-dependency image slider library.
 8 | 
 9 | # Demo
10 | 
11 | http://djyde.github.io/PureSlider
12 | 
13 | # Install
14 | 
15 | CommonJS:
16 | 
17 | ```bash
18 | $ npm install pureslider
19 | ```
20 | 
21 | Browser:
22 | 
23 | Import the `dist/pureslider.dist.js` and link the `dist/pureslider.css`. 
24 | 
25 | # Usage
26 | 
27 | ```html
28 | <div id="pure-slider">
29 |   <div class="ps-item">
30 |     <img src="foo.jpg" >
31 |   </div>
32 |   <div class="ps-item">
33 |     <img src="foo.jpg" >
34 |   </div>
35 |   <div class="ps-item">
36 |     <img src="foo.jpg" >
37 |   </div>
38 |   <div class="ps-item">
39 |     <img src="foo.jpg" >
40 |   </div>
41 | </div>
42 | ```
43 | 
44 | ```javascript
45 | 
46 | import 'pureslider/src/pureslider.css' // Or any other way linking the stylesheet
47 | 
48 | import PureSlider from 'pureslider'
49 | 
50 | const slider = new PureSlider({ /** options **/ })
51 | 
52 | slider.slide() // start the slider
53 | ```
54 | 
55 | # API
56 | 
57 | ## PureSlider([,options])
58 | 
59 | options:
60 | 
61 | | key        | default |
62 | |------------|---------|
63 | | actionMode | fade    |
64 | | duration   | 2000    |
65 | 
66 | ## PureSlider.slide()
67 | 
68 | # Contribution
69 | 
70 | I made `PureSlider` because I found that there aren't many image slider libraries I can use without jQuery. Note there is only one action mode right now, so pull requests are very welcome. Let's make `PureSlider` a good choice for staying independent from jQuery.
71 | 
72 | # Used by
73 | 
74 | [![](https://dn-kiwistatic.qbox.me/liubai/v1/images/header-logo.jpg?imageView/2/w/300)](http://liubaiapp.com)
75 | 
76 | # License
77 | 
78 | MIT License
79 | 


--------------------------------------------------------------------------------
/src/pureslider.css:
--------------------------------------------------------------------------------
 1 | #pure-slider{
 2 |   list-style: none;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   overflow: hidden;
 6 |   width: 100%;
 7 |   height: 100%;
 8 |   position: relative;
 9 | 
10 |   &.fade{
11 |     .ps-item{
12 |       float: left;
13 |       width: 100%;
14 |       height: 100%;
15 |       transition: all 2s;
16 |       position: absolute;
17 |       top: 0;
18 |       bottom: 0;
19 |       right: 0;
20 |       left: 0;
21 |       opacity: 0;
22 |       img{
23 |         width: 100%;
24 |         height: 100%;
25 |       }
26 | 
27 |       &.active{
28 |         transition-delay: all 2s;
29 |         opacity: 1;
30 |       }
31 |     }
32 |   }
33 | }


--------------------------------------------------------------------------------
/src/pureslider.js:
--------------------------------------------------------------------------------
 1 | class PureSlider {
 2 |   constructor({
 3 |     duration = 2000,
 4 |     actionMode = 'fade'
 5 |   } = {}){
 6 |     this.options = {
 7 |       duration,
 8 |       actionMode
 9 |     }
10 |     this.el = document.querySelector('#pure-slider')
11 |     this.activeIndex = 0
12 |     this.el.children[this.activeIndex].classList.add('active')
13 |   }
14 | 
15 |   slide(){
16 |     const actionMode = {
17 |       // All action modes (how it works, what it will do) should be defined in this object
18 |       fade: () => {
19 |         this.el.classList.add('fade')
20 |         setInterval(()=>{
21 |           this.el.children[this.activeIndex].classList.remove('active')
22 |           if (this.activeIndex === this.el.children.length - 1) {
23 |             this.activeIndex = 0
24 |             this.el.children[this.activeIndex].classList.add('active')
25 |           } else {
26 |             this.el.children[this.activeIndex+1].classList.add('active')
27 |             this.activeIndex = this.activeIndex + 1
28 |           }
29 |         }, this.options.duration)
30 |       }
31 |     }
32 |     if (actionMode[this.options.actionMode]) {
33 |       actionMode[this.options.actionMode]()
34 |     } else {
35 |       actionMode.fade()
36 |       console.warn(this.options.actionMode, 'is not a valid action mode')
37 |     }
38 |   }
39 | }
40 | 
41 | module.exports = PureSlider
42 | 


--------------------------------------------------------------------------------
/webpack.config.dist.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   entry: './src/pureslider.js',
 3 |   output: {
 4 |     filename: 'pureslider.dist.js',
 5 |     path: './dist',
 6 |     library: 'PureSlider',
 7 |     libraryTarget: 'umd'
 8 |   },
 9 |   module: {
10 |     loaders: [
11 |       {
12 |         test: /\.js$/,
13 |         loader: 'babel?presets[]=es2015'
14 |       }
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   entry: './src/pureslider.js',
 3 |   output: {
 4 |     filename: 'pureslider.js',
 5 |     path: './lib',
 6 |     libraryTarget: 'commonjs2'
 7 |   },
 8 |   module: {
 9 |     loaders: [
10 |       {
11 |         test: /\.js$/,
12 |         loader: 'babel?presets[]=es2015'
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------