Basitçe slider. jQuery gerektirir. Aceleyle yazılan bir iş için gerekti, buraya aktarırken ufak hata(lar) yapmış olabilirim.

ornek-css.css

/* Yazacak zamanım olmadı */
/* Fixed width+height .slider, çok geniş ve fixed height .slider-container, fixed width-height ve float left .slide'lar. */

ornek-kullanim.js

// Değişken olarak atayınca tuşlar otomatik işlev kazanıyor
// Daha sonra bu değişken üzerinden methodlara da ulaşabilirsiniz
var OrnekSlider = new Slider($('#sliderinizin-idsi'));

ornek-yapi.html

<div class="slider">
	<a href="#" class="slider-ok slider-ok-sol"></a>
	<a href="#" class="slider-ok slider-ok-sag"></a>

	<div class="slider-container">
		<div class="slide"><!-- Slide İçeriği--></div>
	</div><!--slider-container-->
</div><!--slider-->

slider.plugin.js

var Slider = function(slider) {
    this.sl     = slider;
    this.mevcut = 0;
    this.toplam = slider.find('.slide').length;

    this.kaydir = function(konum) {
        if((konum + 1) > this.toplam) {
            // Son slidesa başa dön
            konum = 0;
        } else if(konum < 0) {
            // En baştaysa sona
            konum = this.toplam - 1;
        }

        // Slider kaç px kayacak
        // CSS'teki sliderın genişliğine göre değişecek px boyutu. 960 yerine size uygun olanı yazın.
        var kay = 960 * konum;

        // Kaydır
        $('.slider-container', this.sl).animate({
            marginLeft: '-' + kay + 'px'
        }, 900);

        // Mevcut durumu kaydet 
        this.mevcut = konum;
    };

    this.ileri = function() {
        this.kaydir(this.mevcut + 1);
    };

    this.geri = function() {
        this.kaydir(this.mevcut - 1);
    };

    var slideIns = this;

    // İleri geri butonlarını ata
    $('.slider-ok-sag', this.sl).click(function(event){
        event.preventDefault();

        slideIns.ileri();
    });

    $('.slider-ok-sol', this.sl).click(function(event){
        event.preventDefault();

        slideIns.geri();
    });


};