diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..cb26b61 --- /dev/null +++ b/bower.json @@ -0,0 +1,14 @@ +{ + "name": "unslider", + "version": "0.0.0", + "main": "src/unslider.min.js", + "license": "MIT", + "dependencies": { + "jquery": "latest" + }, + "ignore" : [ + "site/", + "readme.md", + ".gitignore" + ] +} diff --git a/readme.md b/readme.md old mode 100644 new mode 100755 index cd75ce5..19d8ca3 --- a/readme.md +++ b/readme.md @@ -1,51 +1,3 @@ -# Unslider -### A jQuery slider that just slides. +Visit the site. -If you want to have a quick, lightweight slider, with just the arrows and no fancy effects, then you'll love Unslider. Weighing in at 3kb uncompressed, and 1.6kb compressed, it's an incredibly lightweight solution. - -## Features -* Slides a list -* Supports any HTML content (within a list item) -* Keyboard support - -That's it! - -## Quickstart -To begin using Unslider, just include the files, and create a `div` with an unordered list (`ul`) inside. - -Pretty straightforward, and nice and semantic. Lovely. Now, we need a touch of CSS as well: -```css -.unslider { overflow: hidden; } - .unslider li { float: left; } -``` - -_This is the same as the contents for unslider.css, so if you're including that file, don't add this CSS._ - -Now that it's all set up, you just need to call the `unslider` method, with any options. They're optional, though, so you don't need to - -```javascript -// Vanilla install -$('#slider').unslider(); - -// And any options -$('#slider').unslider({ - // Options go here. -}); -``` - -## Options -It's also got a few options: - -```javascript -{ - activeClass: 'active', - arrows: true, // If false, just autoplay - - // Speeds + timing - speed: 250, - delay: 2000, - - // Callbacks - afterSlide: function() {} // Called after a slide has occured. -} -``` \ No newline at end of file +License: WTFPL diff --git a/site/img/icons.png b/site/img/icons.png new file mode 100644 index 0000000..0065c94 Binary files /dev/null and b/site/img/icons.png differ diff --git a/site/img/icons@2x.png b/site/img/icons@2x.png new file mode 100644 index 0000000..7a18904 Binary files /dev/null and b/site/img/icons@2x.png differ diff --git a/site/img/logo.png b/site/img/logo.png new file mode 100644 index 0000000..0d9610b Binary files /dev/null and b/site/img/logo.png differ diff --git a/site/img/shop.jpg b/site/img/shop.jpg new file mode 100644 index 0000000..360a19c Binary files /dev/null and b/site/img/shop.jpg differ diff --git a/site/img/subway.jpg b/site/img/subway.jpg new file mode 100644 index 0000000..010de55 Binary files /dev/null and b/site/img/subway.jpg differ diff --git a/site/img/sunset.jpg b/site/img/sunset.jpg new file mode 100644 index 0000000..3479be8 Binary files /dev/null and b/site/img/sunset.jpg differ diff --git a/site/img/wood.jpg b/site/img/wood.jpg new file mode 100644 index 0000000..d90d39f Binary files /dev/null and b/site/img/wood.jpg differ diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..b8a63fb --- /dev/null +++ b/site/index.html @@ -0,0 +1,258 @@ + + + + + Unslider — the super-tiny jQuery slider + + + + + + + + + + + + + +
+ +
+ +
+

How to use Unslider

+ +
    +
  1. +
    +

    Include jQuery and Unslider

    +

    To use Unslider, you’ll need to make sure both the Unslider and jQuery scripts are included. If you’ve already got jQuery (you can test by opening your JavaScript console and typing !!window.jQuery — if it says true, you have jQuery), you don’t need to add the first line.

    +
    + + 
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
+<script src="//unslider.com/unslider.js"></script>
+
    +
    2. + +
  2. +
    +

    Ready your HTML

    +

    Unslider doesn’t need any really awkward markup. In fact, all you need is a div and an unordered list. An example of some Unslider-friendly HTML is on the right.

    +

    You can add as many slides as you want: the example on the right just has three for the sake of brevity, but Unslider won’t work properly with one slide (but then it’s just a box).

    +
    + + 
    <div class="banner">
+    <ul>
+        <li>This is a slide.</li>
+        <li>This is another slide.</li>
+        <li>This is a final slide.</li>
+    </ul>
+</div>
    +
    3. + +
  3. +
    +

    Make it pretty

    +

    You can change, add, and remove as much CSS per slide as you want, but there is a barebones style required by Unslider. It’s on the right (change the class name where .banner is the name of your slider).

    +
    + + 
    .banner { position: relative; overflow: auto; }
+    .banner li { list-style: none; }
+        .banner ul li { float: left; }
    +
    4. + +
  4. +
    +

    Plug it all together

    +

    We’ve been through so much together, and I’m pleased to say the finish line is near. Our journey is almost over, just one more thing left to do. The JavaScript is on the right (make sure to put it in a script tag, and change .banner to whatever your slider’s element is).

    +
    + + 
    $(function() {
+    $('.banner').unslider();
+});
    +
    5. +
+
+ +
+
+

Options

+

Although it’s lightweight, Unslider comes with a range of options to customise your slider. Here’s the default options provided. You can add, remove, or completely skip out the options object. It’s up to you.

+ + 
$('.banner').unslider({
+	speed: 500,               //  The speed to animate each slide (in milliseconds)
+	delay: 3000,              //  The delay between slide animations (in milliseconds), false for no autoplay
+	complete: function() {},  //  A function that gets called after every slide animation
+	keys: true,               //  Enable keyboard (left, right) arrow shortcuts
+	dots: true,               //  Display dot navigation
+	fluid: false              //  Support responsive design. May break non-responsive designs
+});
+


+

Touch support

+

If you want to add mobile/touch/swipe/whatever support to Unslider, you’ll need to include the jQuery.event.swipe plugin, then it’ll work out the box. Easy!

+ +


+ +

Adding previous/next links

+

A feature that’s often requested in Unslider, but isn’t included in-the-box, is previous/next links. Luckily, they’re easy enough to add with a little script, which utilises Unslider’s methods.

+ + 
<!-- The HTML -->
+<a href="#" class="unslider-arrow prev">Previous slide</a>
+<a href="#" class="unslider-arrow next">Next slide</a>
+
+<!-- And the JavaScript -->
+<script>
+    var unslider = $('.banner').unslider();
+
+    $('.unslider-arrow').click(function() {
+        var fn = this.className.split(' ')[1];
+
+        //  Either do unslider.data('unslider').next() or .prev() depending on the className
+        unslider.data('unslider')[fn]();
+    });
+</script>
+
+ +


+

Accessing Unslider properties

+

Using jQuery’s wonderful data method, you can access and manually override any methods. Here’s a list of what you can do:

+ + 
var slidey = $('.banner').unslider(),
+    data = slidey.data('unslider');
+
+//  Start Unslider
+data.play();
+
+//  Pause Unslider
+data.stop();
+
+//  Move to a slide index, with optional callback
+data.to(2, function() {});
+//  data.to(0);
+
+//  Manually enable keyboard shortcuts
+data.keys();
+
+//  Move to the next slide (or the first slide if there isn't one)
+data.next();
+
+//  Move to the previous slide (or the last slide if there isn't one)
+data.prev();
+
+//  Append the navigation dots manually
+data.dots();
+
+
+ + + + + + + + + + + + + + diff --git a/site/style.css b/site/style.css new file mode 100644 index 0000000..7ac3fa6 --- /dev/null +++ b/site/style.css @@ -0,0 +1,408 @@ +* { + margin: 0; + padding: 0; + + -webkit-font-smoothing: antialiased; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +::selection { + background: #bfa57c; + color: #fff; +} + +body { + color: #a48d66; + font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif; +} + +h1, h2, h3, h4, b { + font-weight: 300; + font-family: bree-web, Bree, sans-serif; +} + h2 { + font-size: 28px; + padding-bottom: 60px; + } + b { + font-weight: 500; + font-size: 16px; + + color: #c3522f; + } + +#logo { + position: absolute; + left: 80px; + top: 40px; + z-index: 2; + + margin-left: -17px; +} + +.banner { + position: relative; + width: 100%; + overflow: auto; + + font-size: 18px; + line-height: 24px; + text-align: center; + + color: rgba(255,255,255,.6); + text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); + + background: #5b4d3d; + box-shadow: 0 1px 2px rgba(0,0,0,.25); +} + .banner ul { + list-style: none; + width: 300%; + } + .banner ul li { + display: block; + float: left; + width: 33%; + min-height: 350px; + + -o-background-size: 100% 100%; + -ms-background-size: 100% 100%; + -moz-background-size: 100% 100%; + -webkit-background-size: 100% 100%; + background-size: 100% 100%; + + box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); + } + + .banner .inner { + padding: 160px 0 110px; + } + + .banner h1, .banner h2 { + font-size: 40px; + line-height: 52px; + + color: #fff; + } + + .banner .btn { + display: inline-block; + margin: 25px 0 0; + padding: 9px 22px 7px; + clear: both; + + color: #fff; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + text-decoration: none; + + border: 2px solid rgba(255,255,255,.4); + border-radius: 5px; + } + .banner .btn:hover { + background: rgba(255,255,255,.05); + } + .banner .btn:active { + -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + } + + .banner .btn, .banner .dot { + -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + } + + .banner .dots { + position: absolute; + left: 0; + right: 0; + bottom: 20px; + width: 100%; + } + .banner .dots li { + display: inline-block; + *display: inline; + zoom: 1; + + width: 10px; + height: 10px; + line-height: 10px; + margin: 0 4px; + + text-indent: -999em; + *text-indent: 0; + + border: 2px solid #fff; + border-radius: 6px; + + cursor: pointer; + opacity: .4; + + -webkit-transition: background .5s, opacity .5s; + -moz-transition: background .5s, opacity .5s; + transition: background .5s, opacity .5s; + } + .banner .dots li.active { + background: #fff; + opacity: 1; + } + + .banner .arrows { + position: absolute; + bottom: 20px; + right: 20px; + color: #fff; + } + .banner .arrow { + display: inline; + padding-left: 10px; + cursor: pointer; + } + +.features { + overflow: hidden; + padding: 50px 0; + + background: #f7f7f6; + box-shadow: inset 0 -1px 3px rgba(0,0,0,.03); +} + .features li { + position: relative; + padding: 0 25px 0 40px; + list-style: none; + + width: 25%; + float: left; + } + .features li:before { + content: ''; + position: absolute; + left: 0; + top: 0; + + display: block; + width: 24px; + height: 22px; + + background: url('img/icons.png'); + } + .features li.browser:before { background-position: 0 -44px; } + .features li.height:before { background-position: 0 -22px; } + .features li.responsive:before { background-position: 0 -66px; } + .features b { + display: block; + padding-bottom: 6px; + } + +.how { + padding: 60px 0; +} + .how h2 { + color: #7c6853; + } + .how h3 { + padding-bottom: 8px; + + color: #7b6b53; + font-size: 20px; + line-height: 10px; + } + .how li { + position: relative; + width: 375px; + margin: 0 0 40px 15px; + padding-left: 10px; + } + .how pre { + position: absolute; + left: 450px; + top: 0; + + width: 495px; + padding: 20px 25px; + + background: #f8f5f0; + color: #8a785d; + + font-size: 12px; + line-height: 18px; + + border-radius: 5px; + box-shadow: inset 0 2px 2px rgba(180,157,125,.15), inset 0 0 1px rgba(0,0,0,.2); + } + .how p { + padding-bottom: 15px; + } + +.options { + padding: 60px 0; + + background: #39342d; + color: #7b7368; + + box-shadow: inset 0 2px 3px rgba(0,0,0,.2); + text-shadow: 0 1px 1px rgba(0,0,0,.2); +} + .options a { + opacity: .7; + color: #fff; + border-bottom: 1px solid rgba(255,255,255,.2); + text-decoration: none; + } + .options a:hover { + opacity: 1; + border-bottom-color: rgba(255,255,255,.3); + } + .options p { + font-size: 16px; + line-height: 25px; + + padding-bottom: 20px; + } + .options h2 { + color: #fff; + padding-bottom: 15px; + } + .options pre { + padding: 20px 25px; + + background: #342f29; + color: #988f81; + + font-size: 13px; + line-height: 19px; + + box-shadow: inset 0 2px 2px rgba(0,0,0,.15), inset 0 0 1px rgba(0,0,0,.1); + border-radius: 5px; + } + .options pre span { + color: #706657; + } + +.footer { + padding: 80px 0 60px; + text-align: center; +} + .footer .btn { + display: inline-block; + padding: 13px 24px 10px; + margin-bottom: 15px; + + background-color: #c4652d; + background-image: -webkit-gradient(linear, left top, left bottom, from(#d07936), to(#b95124)); + background-image: -webkit-linear-gradient(top, #d07936, #b95124); + background-image: -moz-linear-gradient(top, #d07936, #b95124); + background-image: -o-linear-gradient(top, #d07936, #b95124); + background-image: -ms-linear-gradient(top, #d07936, #b95124); + background-image: linear-gradient(top, #d07936, #b95124); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d07936', EndColorStr='#b95124'); + + border-radius: 5px; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.1); + + color: #fff; + text-shadow: 0 1px 2px rgba(0,0,0,.2); + + font-size: 12px; + line-height: 18px; + font-weight: bold; + text-transform: uppercase; + + border: none; + } + .footer .btn span { + font-weight: normal; + opacity: .8; + } + .footer .btn:hover { + opacity: .95; + color: #fff; + } + .footer .btn:active { + opacity: 1; + background-color: #bc5f29; + background-image: -webkit-gradient(linear, left top, left bottom, from(#b55625), to(#c3692d)); + background-image: -webkit-linear-gradient(top, #b55625, #c3692d); + background-image: -moz-linear-gradient(top, #b55625, #c3692d); + background-image: -o-linear-gradient(top, #b55625, #c3692d); + background-image: -ms-linear-gradient(top, #b55625, #c3692d); + background-image: linear-gradient(top, #b55625, #c3692d); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#b55625', EndColorStr='#c3692d'); + + box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,.1), inset 0 2px 2px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.1); + } + .footer a { + margin: 0 4px; + + color: #79654e; + text-decoration: none; + border-bottom: 1px solid #ddd2c6; + } + .footer a:hover { + color: #665139; + border-color: #d1bfa9; + } + +.wrap { + margin: 0 auto; + width: 960px; +} + +@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) { + .wrap { + width: 90%; + } + #logo { + left: 50px; + top: 30px; + } + + .banner h1, .banner h2 { + font-size: 24px; + line-height: 30px; + } + .banner ul li { + height: 240px; + } + .banner .inner { + padding-top: 100px; + padding-bottom: 50px; + } + .banner p { + font-size: 15px; + width: 80%; + margin: 0 auto; + } + pre { + overflow: auto; + } + .features li { + width: 100%; + margin-left: 10px; + margin-bottom: 30px; + } + .how li { + width: 90%; + } + .how pre { + position: static; + width: 100%; + } +} + +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .features li:before { + background: url('img/icons@2x.png'); + background-size: 100%; + } +} \ No newline at end of file diff --git a/src/unslider.js b/src/unslider.js new file mode 100755 index 0000000..eec8a07 --- /dev/null +++ b/src/unslider.js @@ -0,0 +1,251 @@ +/** + * Unslider by @idiot and @damirfoy + * Contributors: + * - @ShamoX + * + */ + +(function($, f) { + var Unslider = function() { + // Object clone + var _ = this; + + // Set some options + _.o = { + speed: 500, // animation speed, false for no transition (integer or boolean) + delay: 3000, // delay between slides, false for no autoplay (integer or boolean) + init: 0, // init delay, false for no delay (integer or boolean) + pause: !f, // pause on hover (boolean) + loop: !f, // infinitely looping (boolean) + keys: f, // keyboard shortcuts (boolean) + dots: f, // display dots pagination (boolean) + arrows: f, // display prev/next arrows (boolean) + prev: '←', // text or html inside prev button (string) + next: '→', // same as for prev option + fluid: f, // is it a percentage width? (boolean) + starting: f, // invoke before animation (function with argument) + complete: f, // invoke after animation (function with argument) + items: '>ul', // slides container selector + item: '>li', // slidable items selector + easing: 'swing',// easing function to use for animation + autoplay: true // enable autoplay on initialisation + }; + + _.init = function(el, o) { + // Check whether we're passing any options in to Unslider + _.o = $.extend(_.o, o); + + _.el = el; + _.ul = el.find(_.o.items); + _.max = [el.outerWidth() | 0, el.outerHeight() | 0]; + _.li = _.ul.find(_.o.item).each(function(index) { + var me = $(this), + width = me.outerWidth(), + height = me.outerHeight(); + + // Set the max values + if (width > _.max[0]) _.max[0] = width; + if (height > _.max[1]) _.max[1] = height; + }); + + + // Cached vars + var o = _.o, + ul = _.ul, + li = _.li, + len = li.length; + + // Current indeed + _.i = 0; + + // Set the main element + el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'}); + + // Set the relative widths + ul.css({position: 'relative', left: 0, width: (len * 100) + '%'}); + if(o.fluid) { + li.css({'float': 'left', width: (100 / len) + '%'}); + } else { + li.css({'float': 'left', width: (_.max[0]) + 'px'}); + } + + // Autoslide + o.autoplay && setTimeout(function() { + if (o.delay | 0) { + _.play(); + + if (o.pause) { + el.on('mouseover mouseout', function(e) { + _.stop(); + e.type === 'mouseout' && _.play(); + }); + }; + }; + }, o.init | 0); + + // Keypresses + if (o.keys) { + $(document).keydown(function(e) { + switch(e.which) { + case 37: + _.prev(); // Left + break; + case 39: + _.next(); // Right + break; + case 27: + _.stop(); // Esc + break; + }; + }); + }; + + // Dot pagination + o.dots && nav('dot'); + + // Arrows support + o.arrows && nav('arrow'); + + // Patch for fluid-width sliders. Screw those guys. + o.fluid && $(window).resize(function() { + _.r && clearTimeout(_.r); + + _.r = setTimeout(function() { + var styl = {height: li.eq(_.i).outerHeight()}, + width = el.outerWidth(); + + ul.css(styl); + styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%'; + el.css(styl); + li.css({ width: width + 'px' }); + }, 50); + }).resize(); + + // Move support + if ($.event.special['move'] || $.Event('move')) { + el.on('movestart', function(e) { + if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) { + e.preventDefault(); + }else{ + el.data("left", _.ul.offset().left / el.width() * 100); + } + }).on('move', function(e) { + var left = 100 * e.distX / el.width(); + var leftDelta = 100 * e.deltaX / el.width(); + _.ul[0].style.left = parseInt(_.ul[0].style.left.replace("%", ""))+leftDelta+"%"; + + _.ul.data("left", left); + }).on('moveend', function(e) { + var left = _.ul.data("left"); + if (Math.abs(left) > 30){ + var i = left > 0 ? _.i-1 : _.i+1; + if (i < 0 || i >= len) i = _.i; + _.to(i); + }else{ + _.to(_.i); + } + }); + }; + + return _; + }; + + // Move Unslider to a slide index + _.to = function(index, callback) { + if (_.t) { + _.stop(); + _.play(); + } + var o = _.o, + el = _.el, + ul = _.ul, + li = _.li, + current = _.i, + target = li.eq(index); + + $.isFunction(o.starting) && !callback && o.starting(el, li.eq(current)); + + // To slide or not to slide + if ((!target.length || index < 0) && o.loop === f) return; + + // Check if it's out of bounds + if (!target.length) index = 0; + if (index < 0) index = li.length - 1; + target = li.eq(index); + + var speed = callback ? 5 : o.speed | 0, + easing = o.easing, + obj = {height: target.outerHeight()}; + + if (!ul.queue('fx').length) { + // Handle those pesky dots + el.find('.dot').eq(index).addClass('active').siblings().removeClass('active'); + + el.animate(obj, speed, easing) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, easing, function(data) { + _.i = index; + + $.isFunction(o.complete) && !callback && o.complete(el, target); + }); + }; + }; + + // Autoplay functionality + _.play = function() { + _.t = setInterval(function() { + _.to(_.i + 1); + }, _.o.delay | 0); + }; + + // Stop autoplay + _.stop = function() { + _.t = clearInterval(_.t); + return _; + }; + + // Move to previous/next slide + _.next = function() { + return _.stop().to(_.i + 1); + }; + + _.prev = function() { + return _.stop().to(_.i - 1); + }; + + // Create dots and arrows + function nav(name, html) { + if (name == 'dot') { + html = '
    '; + $.each(_.li, function(index) { + html += '
  1. ' + ++index + '
    2. '; + }); + html += '
'; + } else { + html = '
' + html + name + ' prev">' + _.o.prev + '
' + html + name + ' next">' + _.o.next + ''; + }; + + _.el.addClass('has-' + name + 's').append(html).find('.' + name).click(function() { + var me = $(this); + me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev') ? _.prev() : _.next(); + }); + }; + }; + + // Create a jQuery plugin + $.fn.unslider = function(o) { + var len = this.length; + + // Enable multiple-slider support + return this.each(function(index) { + // Cache a copy of $(this), so it + var me = $(this), + key = 'unslider' + (len > 1 ? '-' + ++index : ''), + instance = (new Unslider).init(me, o); + + // Invoke an Unslider instance + me.data(key, instance).data('key', key); + }); + }; + + Unslider.version = "1.0.0"; +})(jQuery, false); diff --git a/src/unslider.min.js b/src/unslider.min.js new file mode 100644 index 0000000..a715fa8 --- /dev/null +++ b/src/unslider.min.js @@ -0,0 +1 @@ +(function(e,t){var n=function(){function r(t,r){if(t=="dot"){r='
    ';e.each(n.li,function(e){r+='
  1. '+ ++e+"
    2. "});r+="
"}else{r='
'+r+t+' prev">'+n.o.prev+"
"+r+t+' next">'+n.o.next+""}n.el.addClass("has-"+t+"s").append(r).find("."+t).click(function(){var t=e(this);t.hasClass("dot")?n.stop().to(t.index()):t.hasClass("prev")?n.prev():n.next()})}var n=this;n.o={speed:500,delay:3e3,init:0,pause:!t,loop:!t,keys:t,dots:t,arrows:t,prev:"←",next:"→",fluid:t,starting:t,complete:t,items:">ul",item:">li",easing:"swing",autoplay:true};n.init=function(t,i){n.o=e.extend(n.o,i);n.el=t;n.ul=t.find(n.o.items);n.max=[t.outerWidth()|0,t.outerHeight()|0];n.li=n.ul.find(n.o.item).each(function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s});var i=n.o,s=n.ul,o=n.li,u=o.length;n.i=0;t.css({width:n.max[0],height:o.first().outerHeight(),overflow:"hidden"});s.css({position:"relative",left:0,width:u*100+"%"});o.css({"float":"left",width:n.max[0]+"px"});i.autoplay&&setTimeout(function(){if(i.delay|0){n.play();if(i.pause){t.on("mouseover mouseout",function(e){n.stop();e.type=="mouseout"&&n.play()})}}},i.init|0);if(i.keys){e(document).keydown(function(e){var t=e.which;if(t==37)n.prev();else if(t==39)n.next();else if(t==27)n.stop()})}i.dots&&r("dot");i.arrows&&r("arrow");if(i.fluid){e(window).resize(function(){n.r&&clearTimeout(n.r);n.r=setTimeout(function(){var e={height:o.eq(n.i).outerHeight()},r=t.outerWidth();s.css(e);e["width"]=Math.min(Math.round(r/t.parent().width()*100),100)+"%";t.css(e)},50)}).resize()}if(e.event.special["swipe"]||e.Event("swipe")){t.on("swipeleft swiperight swipeLeft swipeRight",function(e){e.type.toLowerCase()=="swipeleft"?n.next():n.prev()})}return n};n.to=function(r,i){if(n.t){n.stop();n.play()}var s=n.o,o=n.el,u=n.ul,a=n.li,l=n.i,c=a.eq(r);e.isFunction(s.starting)&&!i&&s.starting(o,a.eq(l));if((!c.length||r<0)&&s.loop==t)return;if(!c.length)r=0;if(r<0)r=a.length-1;c=a.eq(r);var h=i?5:s.speed|0,p=s.easing,d={height:c.outerHeight()};if(!u.queue("fx").length){o.find(".dot").eq(r).addClass("active").siblings().removeClass("active");o.animate(d,h,p)&&u.animate(e.extend({left:"-"+r+"00%"},d),h,p,function(t){n.i=r;e.isFunction(s.complete)&&!i&&s.complete(o,c)})}};n.play=function(){n.t=setInterval(function(){n.to(n.i+1)},n.o.delay|0)};n.stop=function(){n.t=clearInterval(n.t);return n};n.next=function(){return n.stop().to(n.i+1)};n.prev=function(){return n.stop().to(n.i-1)};};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this),u="unslider"+(r>1?"-"+ ++i:""),a=(new n).init(s,t);s.data(u,a).data("key",u)})};n.version="1.0.0"})(jQuery,false) \ No newline at end of file diff --git a/unslider.css b/unslider.css deleted file mode 100644 index 9179d4a..0000000 --- a/unslider.css +++ /dev/null @@ -1,2 +0,0 @@ -.unslider { overflow: hidden; } - .unslider li { float: left; } \ No newline at end of file diff --git a/unslider.js b/unslider.js deleted file mode 100644 index 8e183ae..0000000 --- a/unslider.js +++ /dev/null @@ -1,141 +0,0 @@ -/** - * Unslider 0.1 - * by @visualidiot - * - * Licensed under the WTFPL, as always. - * - ** - * The quickest way to set it up is like this. - ** - * - * HTML:
- * - *
- * - * CSS: Provided in unslider.css - * - * JS: $('#slider').unslider(); - */ - -(function($, d) { - - /** - * Move the Unslider - */ - $.fn.moveUnslider = function(pos, speed, callback) { - return this.stop().animate({marginLeft: parseFloat(pos)}, speed, callback); - }; - - $.fn.unslider = function(options) { - - // Set the options - var o = $.extend({ - activeClass: 'active', - arrows: true, // If false, just autoplay - - // Speeds + timing - speed: 250, - delay: 2000, - - // Callbacks - afterSlide: function() {} - }, options); - - // And loop every instance of the Unslider - return this.each(function() { - var me = $(this).addClass('unslider'), - list = me.children('ul'), - items = list.children('li'), - first = items.filter(':first'), - - itemCount = items.length + 2, // Don't forget our clones! - - width = me.width(), - height = first.height(), - - go = function() { - - var me = $(this), - dir = me.attr('class').split(' ')[1], - - current = items.filter('.' + o.activeClass), - margin = parseFloat(list.css('margin-left')), - - actions = { - previous: function() { - - var first = current.prev().hasClass('cloned'), - prev = first ? items.eq(-1) : current.prev(); - - prev.addClass(o.activeClass).siblings().removeClass(o.activeClass); - - if(!first) { - list.moveUnslider(margin + width, o.speed, o.afterSlide); - } else { - list.moveUnslider(-(width * (itemCount - 3)), o.speed, o.afterSlide); - } - }, - next: function() { - - var last = current.next().hasClass('cloned'), - next = last ? items.eq(0) : current.next(); - - next.addClass(o.activeClass).siblings().removeClass(o.activeClass); - - if(last) { - setTimeout(function() { - list.moveUnslider(-width, 0); - }, o.speed); - } - - return list.moveUnslider(margin - width, o.speed, o.afterSlide); - } - }; - - // Run the action, based on the class of the link. Genius. - if(actions[dir]) { - actions[dir](); - } - }; - - // Check we have two or more items (the itemCount adds two) - if(itemCount > 4) { - - // Append the first and last items - first.addClass(o.activeClass).clone().attr('class', 'cloned').appendTo(list); - items.filter(':last').clone().addClass('cloned').prependTo(list); - - // Set the width to stop wrapping, and since we have a clone, position it offscreen - list.css({width: width * itemCount, marginLeft: -width}); - - // Get the arrows, if they want 'em. - if(o.arrows) { - $('

').appendTo(me.parent()).find('.arrow').each(function() { - - var me = $(this), dir = me.attr('class').split(' ')[1], - msg = 'Click to show the ? slide'.replace('?', dir), - arrows = {previous: '«', next: '»'}; - - me.attr('title', msg).html(arrows[dir]); - - }).click(go); - - $(d).keyup(function(e) { - var key = e.which, - keys = {37: 'previous', 39: 'next'}; - - if(keys[key]) { - $('.unslider-arrows .' + keys[key]).click(); - } - }); - } - - } - }); - }; - -})(jQuery, document); \ No newline at end of file