├── LICENSE.txt ├── README.md ├── demo.html └── minimal-carousel.js /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Lucas Videla 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # minimal carousel 2 | 3 | A minimalist carousel. No jQuery. 4 | 5 | ## Demo 6 | 7 | [See it live!](http://labs.wecode.io/minimal-carousel/) 8 | 9 | ## Options 10 | 11 | * `carousel`: css selector of carousel container. Defaults to `.carousel` 12 | * `delay`: delay between slides in seconds. Defaults to `2.5` secs 13 | * `autoplay`: whether or not it plays automaticaly. Defaults to `true` 14 | 15 | ## Usage 16 | 17 | ### HTML 18 | 19 |
20 | 31 |
32 | 33 | ### CSS 34 | 35 | .carousel ul li { 36 | display: none; 37 | } 38 | 39 | ### Javascript 40 | 41 | new Carousel({ 42 | carousel: '.carousel', 43 | delay: 2.5, 44 | autoplay: true 45 | }) 46 | 47 | ## Roadmap 48 | 49 | * Simple transitions 50 | * Ease in/out 51 | 52 | ## Contributing 53 | 54 | 1. Fork it 55 | 2. Create your feature branch (`git checkout -b my-new-feature`) 56 | 3. Commit your changes (`git commit -am 'Add some feature'`) 57 | 4. Push to the branch (`git push origin my-new-feature`) 58 | 5. Create new Pull Request 59 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | minimal carousel - demo 6 | 26 | 27 | 28 |

minimal carousel - demo

29 |
30 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 | 43 |
44 | 45 |

Usage

46 | 47 |

HTML

48 | 
49 |   <div class="carousel">
50 |     <ul>
51 |       <li>
52 |         First impressive message!
53 |       </li>
54 |       <li>
55 |         Second message with all the magic
56 |       </li>
57 |       <li>
58 |         Also, you can configure minimal carousel as you want.
59 |       </li>
60 |     </ul>
61 |   </div>
62 |
63 | 64 |

CSS

65 | 
66 |     .carousel ul li {
67 |       display: none;
68 |     }
69 |
70 | 71 |

Javascript

72 | 
73 |     new Carousel({
74 |       carousel: '.carousel',
75 |       delay: 2.5,
76 |       autoplay: true
77 |     })
78 |
79 | 80 | 81 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /minimal-carousel.js: -------------------------------------------------------------------------------- 1 | function Carousel(settings){ 2 | 'use strict'; 3 | settings = settings || {}; 4 | this.carousel = document.querySelector(settings.carousel || '.carousel'); 5 | this.slides = this.carousel.querySelectorAll('ul li'); 6 | this.delay = settings.delay || 2.5; 7 | this.autoplay = settings.autoplay === undefined ? true : settings.autoplay; 8 | 9 | this.slides_total = this.slides.length; 10 | this.current_slide = -1; 11 | 12 | if (this.autoplay) { 13 | this.play(); 14 | } 15 | } 16 | 17 | Carousel.prototype.next = function (is_interval_call) { 18 | 'use strict'; 19 | for (var s = 0; s < this.slides.length; s += 1) { 20 | this.slides[s].style.display = 'none'; 21 | } 22 | this.current_slide = (this.current_slide + 1) % this.slides.length; 23 | this.slides[this.current_slide].style.display = 'block'; 24 | if (this.autoplay && this.interval && !is_interval_call) { 25 | var that = this; 26 | clearInterval(this.interval); 27 | this.interval = setTimeout(function () { 28 | that.play(); 29 | }, this.delay * 1000); 30 | } 31 | }; 32 | 33 | Carousel.prototype.prev = function () { 34 | 'use strict'; 35 | for (var s = 0; s < this.slides.length; s += 1) { 36 | this.slides[s].style.display = 'none'; 37 | } 38 | this.current_slide = Math.abs(this.current_slide - 1 + this.slides.length) % this.slides.length; 39 | this.slides[this.current_slide].style.display = 'block'; 40 | if (this.autoplay && this.interval) { 41 | var that = this; 42 | clearInterval(this.interval); 43 | this.interval = setTimeout(function () { 44 | that.play(); 45 | }, this.delay * 1000); 46 | } 47 | }; 48 | 49 | Carousel.prototype.play = function () { 50 | 'use strict'; 51 | this.next(true); 52 | var that = this; 53 | this.autoplay = true; 54 | this.interval = setTimeout(function () { 55 | that.play(); 56 | }, this.delay * 1000); 57 | }; 58 | 59 | Carousel.prototype.stop = function () { 60 | 'use strict'; 61 | if (this.interval) { 62 | this.autoplay = false; 63 | clearInterval(this.interval); 64 | } 65 | }; 66 | --------------------------------------------------------------------------------