Very simple slideshow plugin for jquery

slideshow-notes.markdown

Notes

• div.controls is vital for autoplay functionality

slideshow.html

<section class="slideshow">
	<div class="viewbox">
		<ul class="slides">
			<li><img src="1.jpg" alt="" /></li>
			<li><img src="1.jpg" alt="" /></li>
			<li><img src="1.jpg" alt="" /></li>
		</ul>
	</div>
	<div class="controls">
		<ul>
			<li><a class="active" data-slide="1"></a></li>
			<li><a data-slide="2"></a></li>
			<li><a data-slide="3"></a></li>
		</ul>
	</div>
</section>

slideshow.jquery.js

(function ($) {
    var settings;
    $.fn.slideshow = function(options) {
        settings = $.extend({}, $.fn.slideshow.defaults, options);
        return this.each(function() {
            var container = $(this);
            adjust(container);
            $(document).ready(function() {
                adjust(container);
            });
            $(window).on('resize load', function() {
                adjust(container);
            });
            container.find('a[data-slide]').click(function() {
                settings.onSlide.call(container);
                var link = $(this);
                container.find('a[data-slide]').removeClass('active');
                link.addClass('active');
                slide(container, link.parent('li').index(), settings.speed);
            }).first().trigger('click');
            if(settings.autoplay) {
                autoplay(container);
            }
        });
    };
    function adjust(container) {
        var slides_container = container.find('ul.slides');
        var slides = slides_container.find('li');
        var width = container.width();
        slides_container.css('width', width * slides.length);
        slides.css('width', width);
        slide(container, container.find('a.active').parent('li').index(), 0);
    }
    function slide(container, index, duration) {
        if(duration > 0) {
            container.find('ul.slides').animate({
                left: -index * container.width()
            }, duration);
        } else {
            container.find('ul.slides').css('left', -index * container.width());
        }
        if(settings.autoplay) {
            autoplay(container);
        }
    }
    function autoplay(container) {
        clearInterval(container.data('interval'));
        container.data('interval', setInterval(function() {
            container.find('a[data-slide]').eq((container.find('a.active[data-slide]').parent('li').index() + 1) % container.find('.controls li').length).trigger('click');
        }, settings.interval));
    }
    $.fn.slideshow.defaults = {
        speed: 400,
        autoplay: false,
        interval: 7000,
        onSlide: function() {}
    };
}(jQuery));

slideshow.scss

section.slideshow {
	position: relative;
	.viewbox {
		overflow: hidden;
	}
	ul {
		position: relative;
		left: 0;
		overflow: hidden;
	}
	li {
		float: left;
		display: block;
	}
	img {
		width: 100%;
	}
}

Has flaws atm and needs more work, I know ;)

Introduced autoplay functionality :) ... still needs work, though 😄