├── README.md ├── css └── style.css ├── images ├── a.jpg ├── b.jpg ├── c.jpg ├── d.jpg └── e.jpg ├── index.html └── js └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # Javascript Image Slider 2 | Html, Css and Javascript Image Slider with control buttons 3 | 4 | [Live Preview](https://skcals.github.io/javascript_image_slider) 5 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /*css/style.css */ 2 | 3 | .slider{ 4 | margin:50px auto; 5 | width:50%; 6 | } 7 | 8 | .img-box img{ 9 | width:100%; 10 | } 11 | 12 | .btn{ 13 | border:none; 14 | outline:none; 15 | background:#888; 16 | padding:10px 30px; 17 | font-size: 20px; 18 | color:#ddd; 19 | cursor: pointer; 20 | margin:10px auto; 21 | } 22 | 23 | .btn:hover{ 24 | background: #111; 25 | } -------------------------------------------------------------------------------- /images/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skcals/javascript_image_slider/d98a3413b24a712cf05270f2b92186a4a1dcba3c/images/a.jpg -------------------------------------------------------------------------------- /images/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skcals/javascript_image_slider/d98a3413b24a712cf05270f2b92186a4a1dcba3c/images/b.jpg -------------------------------------------------------------------------------- /images/c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skcals/javascript_image_slider/d98a3413b24a712cf05270f2b92186a4a1dcba3c/images/c.jpg -------------------------------------------------------------------------------- /images/d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skcals/javascript_image_slider/d98a3413b24a712cf05270f2b92186a4a1dcba3c/images/d.jpg -------------------------------------------------------------------------------- /images/e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skcals/javascript_image_slider/d98a3413b24a712cf05270f2b92186a4a1dcba3c/images/e.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Javascript Image Slider 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // 'js/mian.js' 2 | 3 | var slider_img = document.querySelector('.slider-img'); 4 | var images = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg']; 5 | var i = 0; 6 | 7 | function prev(){ 8 | if(i <= 0) i = images.length; 9 | i--; 10 | return setImg(); 11 | } 12 | 13 | function next(){ 14 | if(i >= images.length-1) i = -1; 15 | i++; 16 | return setImg(); 17 | } 18 | 19 | function setImg(){ 20 | return slider_img.setAttribute('src', "images/"+images[i]); 21 | 22 | } --------------------------------------------------------------------------------