Add files via upload

nueq22 · Apr 18, 2017 · 9817ac8 · 9817ac8
1 parent 2c35473
commit 9817ac8
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 0 deletions.
diff --git a/README.MD b/README.MD
@@ -0,0 +1,36 @@
+# air-slider
+#### It's simple, lightweight responsive slider without jquery. Only 3kB. SASS Included.
+1. Add slider styles
+```html
+<link rel="stylesheet" href="air-slider/air-slider.min.css">
+```
+2. Add slider markup
+```html
+<div class="air-slider">
+ <div class="slide">
+ <img src="img/image1.jpg" alt="slide1"/>
+ </div>
+ <div class="slide">
+ <img src="img/image2.jpeg" alt="slide2"/>
+ </div>
+ <div class="slide">
+ <img src="img/image3.jpeg" alt="slide3"/>
+ </div>
+</div>
+```
+3. Add slider script and init slider
+```html
+<script src="air-slider/air-slider.min.js"></script>
+<script>
+ var slider = new airSlider({
+ autoPlay: true,
+ width: '600px',
+ height: '300px'
+ });
+</script>
+```
+#### Parameters list
+1. ```autoPlay```: true/false (default - false);
+2. ```autoPlayTime```: value in milliseconds (default - 3000);
+3. ```width```: any css width (%, px, vw, rem...);
+4. ```height```: any css height (%, px, vh, rem...);
diff --git a/air-slider/air-slider.min.css b/air-slider/air-slider.min.css
diff --git a/air-slider/air-slider.min.js b/air-slider/air-slider.min.js
diff --git a/example.html b/example.html
@@ -0,0 +1,38 @@
+<!DOCTYPE hmtl>
+<html>
+ <head>
+ <title>air-slider</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="air-slider/air-slider.min.css">
+ <style>
+ body{
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ text-align: center;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>air-slider</h1>
+ <h2>Very simple and lightweight pure js slider</h2>
+ <div class="air-slider">
+ <div class="slide">
+ <img src="img/image1.jpg" alt="slide1"/>
+ </div>
+ <div class="slide">
+ <img src="img/image2.jpeg" alt="slide2"/>
+ </div>
+ <div class="slide">
+ <img src="img/image3.jpeg" alt="slide3"/>
+ </div>
+ </div>
+ <script src="air-slider/air-slider.min.js"></script>
+ <script>
+ var slider = new airSlider({
+ autoPlay: true,
+ width: '600px',
+ height: '300px'
+ });
+ </script>
+ </body>
+</html>
diff --git a/img/image1.jpg b/img/image1.jpg
diff --git a/img/image2.jpeg b/img/image2.jpeg
diff --git a/img/image3.jpeg b/img/image3.jpeg
diff --git a/source/air-slider-ES6-original.js b/source/air-slider-ES6-original.js
@@ -0,0 +1,60 @@
+"use strict";
+class airSlider {
+ constructor(e) {
+ //Element Description
+ this.slider = document.querySelector('.air-slider');
+ this.slider.children[0].classList.toggle('active-slide');
+ //Slider Length
+ this.length = document.querySelectorAll('.slide').length;
+ //Sizes
+ if(e.width == undefined){
+ e.width = '100%';
+ }
+ if(e.height == undefined){
+ e.height = '300px';
+ }
+ this.slider.style.maxWidth = e.width;
+ this.slider.style.height = e.height;
+ //Constrols
+ var controls = document.createElement('div');
+ controls.className = 'controls';
+ controls.innerHTML = '<button id="prev"><</button><button id="next">></button>';
+ this.slider.appendChild(controls);
+ //Controls Listeners
+ document.querySelector('#prev').addEventListener('click', function(){
+ slider.prev();
+ });
+ document.querySelector('#next').addEventListener('click', function(){
+ slider.next();
+ });
+ //AutoPlay
+ if(e.autoPlay == true){
+ this.autoPlayTime = e.autoPlayTime;
+ if(this.autoPlayTime == undefined){
+ this.autoPlayTime = 3000;
+ } 
+ setInterval(this.autoPlay, this.autoPlayTime);
+ }
+ }
+ prev() {
+ var currentSlide = document.querySelector('.active-slide'); 
+ var prevSlide = document.querySelector('.active-slide').previousElementSibling;
+ if(prevSlide == undefined){
+ prevSlide = this.slider.children[this.length - 1];
+ }
+ currentSlide.className = 'slide';
+ prevSlide.classList = 'slide active-slide'
+ }
+ next() {
+ var currentSlide = document.querySelector('.active-slide'); 
+ var nextSlide = document.querySelector('.active-slide').nextElementSibling;
+ if(nextSlide.className == 'controls'){
+ nextSlide = this.slider.children[0];
+ }
+ currentSlide.className = 'slide';
+ nextSlide.classList = 'slide active-slide fadeIn'
+ }
+ autoPlay(){
+ slider.next();
+ }
+}
diff --git a/source/styles/air-slider.css b/source/styles/air-slider.css
diff --git a/source/styles/air-slider.css.map b/source/styles/air-slider.css.map
diff --git a/source/styles/air-slider.sass b/source/styles/air-slider.sass
@@ -0,0 +1,34 @@
+.air-slider
+ position: relative
+ margin: 0 auto
+ .slide
+ width: 100%
+ height: 100%
+ position: absolute
+ overflow: hidden
+ opacity: 0
+ transition: 1s ease all
+ background: #ccc
+ img
+ width: 100%
+ height: 100%
+ .active-slide
+ opacity: 1
+ .controls
+ width: 100%
+ height: 50px
+ top: calc(50% - 25px)
+ left: 0
+ display: flex
+ flex-flow: row nowrap
+ justify-content: space-between
+ position: absolute
+ button
+ width: 50px
+ height: 50px
+ background: rgba(0,0,0,0.8)
+ color: #fff
+ border: none
+ outline: none
+ cursor: pointer
+ font-weight: bold