├── readme.txt └── sss ├── images └── arr.png ├── license.txt ├── sss.css ├── sss.min.js └── sss.js /readme.txt: -------------------------------------------------------------------------------- 1 | lovingly built by @intllgnt -------------------------------------------------------------------------------- /sss/images/arr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intllgnt/SSS/HEAD/sss/images/arr.png -------------------------------------------------------------------------------- /sss/license.txt: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | 15 | -------------------------------------------------------------------------------- /sss/sss.css: -------------------------------------------------------------------------------- 1 | .sss { 2 | height: 0; 3 | margin: 0; 4 | padding: 0; 5 | position: relative; 6 | display: block; 7 | overflow: hidden; 8 | } 9 | 10 | .ssslide { 11 | width: 100%; 12 | margin: 0; 13 | padding: 0; 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | display: none; 18 | overflow: hidden; 19 | } 20 | 21 | .ssslide img { 22 | max-width: 100%; 23 | height: auto; 24 | margin: 0; 25 | padding: 0; 26 | position: relative; 27 | display: block; 28 | } 29 | 30 | .sssnext, .sssprev { 31 | width: 25px; 32 | height: 100%; 33 | margin: 0; 34 | position: absolute; 35 | top: 0; 36 | background: url('images/arr.png') no-repeat; 37 | } 38 | 39 | .sssprev { 40 | left: 3%; 41 | background-position: 0 50%; 42 | } 43 | 44 | .sssnext { 45 | right: 3%; 46 | background-position: -26px 50%; 47 | } 48 | 49 | .sssprev:hover, .sssnext:hover { 50 | cursor: pointer; 51 | } -------------------------------------------------------------------------------- /sss/sss.min.js: -------------------------------------------------------------------------------- 1 | (function(e,t,n,r){e.fn.sss=function(r){var i=e.extend({slideShow:true,startOn:0,speed:3500,transition:400,arrows:true},r);return this.each(function(){function y(e){return s.eq(e).height()/o.width()*100+"%"}function b(e){if(!c){c=true;var t=s.eq(e);t.fadeIn(a);s.not(t).fadeOut(a);o.animate({paddingBottom:y(e)},a,function(){c=false});g()}}function w(){l=l===u-1?0:l+1;b(l)}function E(){l=l===0?u-1:l-1;b(l)}var r=e(this),s=r.children().wrapAll('
').addClass("ssslide"),o=r.find(".sss"),u=s.length,a=i.transition,f=i.startOn,l=f>u-1?0:f,c=false,h,p,d,v,m,g=i.slideShow?function(){clearTimeout(p);p=setTimeout(w,i.speed)}:e.noop;if(i.arrows){o.append('
','
')}m=o.find(".sssnext"),v=o.find(".sssprev");e(t).load(function(){o.css({paddingBottom:y(l)}).click(function(t){h=e(t.target);if(h.is(m)){w()}else if(h.is(v)){E()}});b(l);e(n).keydown(function(e){d=e.keyCode;if(d===39){w()}else if(d===37){E()}})})})}})(jQuery,window,document) -------------------------------------------------------------------------------- /sss/sss.js: -------------------------------------------------------------------------------- 1 | /** Super Simple Slider by @intllgnt **/ 2 | 3 | ;(function($, window, document, undefined ) { 4 | 5 | $.fn.sss = function(options) { 6 | 7 | // Options 8 | 9 | var settings = $.extend({ 10 | slideShow : true, 11 | startOn : 0, 12 | speed : 3500, 13 | transition : 400, 14 | arrows : true 15 | }, options); 16 | 17 | return this.each(function() { 18 | 19 | // Variables 20 | 21 | var 22 | wrapper = $(this), 23 | slides = wrapper.children().wrapAll('
').addClass('ssslide'), 24 | slider = wrapper.find('.sss'), 25 | slide_count = slides.length, 26 | transition = settings.transition, 27 | starting_slide = settings.startOn, 28 | target = starting_slide > slide_count - 1 ? 0 : starting_slide, 29 | animating = false, 30 | clicked, 31 | timer, 32 | key, 33 | prev, 34 | next, 35 | 36 | // Reset Slideshow 37 | 38 | reset_timer = settings.slideShow ? function() { 39 | clearTimeout(timer); 40 | timer = setTimeout(next_slide, settings.speed); 41 | } : $.noop; 42 | 43 | // Animate Slider 44 | 45 | function get_height(target) { 46 | return ((slides.eq(target).height() / slider.width()) * 100) + '%'; 47 | } 48 | 49 | function animate_slide(target) { 50 | if (!animating) { 51 | animating = true; 52 | var target_slide = slides.eq(target); 53 | 54 | target_slide.fadeIn(transition); 55 | slides.not(target_slide).fadeOut(transition); 56 | 57 | slider.animate({paddingBottom: get_height(target)}, transition, function() { 58 | animating = false; 59 | }); 60 | 61 | reset_timer(); 62 | 63 | }}; 64 | 65 | // Next Slide 66 | 67 | function next_slide() { 68 | target = target === slide_count - 1 ? 0 : target + 1; 69 | animate_slide(target); 70 | } 71 | 72 | // Prev Slide 73 | 74 | function prev_slide() { 75 | target = target === 0 ? slide_count - 1 : target - 1; 76 | animate_slide(target); 77 | } 78 | 79 | if (settings.arrows) { 80 | slider.append('
', '
'); 81 | } 82 | 83 | next = slider.find('.sssnext'), 84 | prev = slider.find('.sssprev'); 85 | 86 | $(window).load(function() { 87 | 88 | slider.css({paddingBottom: get_height(target)}).click(function(e) { 89 | clicked = $(e.target); 90 | if (clicked.is(next)) { next_slide() } 91 | else if (clicked.is(prev)) { prev_slide() } 92 | }); 93 | 94 | animate_slide(target); 95 | 96 | $(document).keydown(function(e) { 97 | key = e.keyCode; 98 | if (key === 39) { next_slide() } 99 | else if (key === 37) { prev_slide() } 100 | }); 101 | 102 | }); 103 | // End 104 | 105 | }); 106 | 107 | }; 108 | })(jQuery, window, document); --------------------------------------------------------------------------------