gSlideShow.js like olx.co.id

(function($){
    $.fn.gSlideShow = function(settings){
        var config = {};

        if (settings) {
            $.extend(config,settings);
        }

        var parent = this;
        var imgContainer = parent.children(".img-container");
        var slide = imgContainer.children(".slide");
        var slideList = parent.children(".slideList");
        var countSlide = slide.length;
        var i = 0;

        for (var j=0;j<countSlide;j++) {
            var src = slide.eq(j).attr("src");
            var alt = slide.eq(j).attr("alt");
            var title = slide.eq(j).attr("title");
            slideList.append("<div class='thumb pageSlide' data-target='"+j+"'><div><img src='"+src+"' alt='"+alt+"' title='"+title+"' /></div></div>");
        }

        imgContainer.find(".slide-nav").bind("click",function(){
            slide.eq(i).css("display","none");
            if ($(this).hasClass("left")) {
                i=(i-1<0)?countSlide-1:i-1;
                //alert(i + " === " + countSlide);
            }else if ($(this).hasClass("right")) {
                i=(i+1==countSlide)?0:i+1;
            }
            slide.eq(i).fadeIn(config.fadeDur);
            $(".pageSlide").removeClass("active");
            $(".pageSlide").eq(i).addClass("active");
        });

        slideList.find(".pageSlide").bind("click",function(){
            var target = $(this).attr("data-target");
            if (i!=target) {
                slide.eq(i).css("display","none");
                slide.eq(target).fadeIn(config.fadeDur);
                i=parseInt(target);
                $(".pageSlide").removeClass("active");
                $(".pageSlide").eq(target).addClass("active");
            }
        });

        slide.eq(0).show();
        $(".pageSlide").eq(0).addClass("active");

        return this;
    };
}(jQuery));

//html format
<script type="text/javascript">
	$(document).ready(function () {
   		$(".gSlide").gSlideShow();
	});
</script>
<div class="gSlide">
	<div class="img-container">
		<div class="slide-nav left">
                	<div></div>
            	</div>
   		<div class="slide-nav right">
             		<div></div>
             	</div>
             	<img class="slide" src="images/ads/1.jpg" alt="Iklan 1" title="Iklan 1" />
            	<img class="slide" src="images/ads/2.jpg" alt="Iklan 2" title="Iklan 2" />
          	<img class="slide" src="images/ads/3.jpg" alt="Iklan 3" title="Iklan 3" />
            	<img class="slide" src="images/ads/4.jpg" alt="Iklan 4" title="Iklan 4" />
             	<img class="slide" src="images/ads/5.jpg" alt="Iklan 5" title="Iklan 5" />
           	<img class="slide" src="images/ads/6.jpg" alt="Iklan 6" title="Iklan 6" />
     	</div> <!-- end class img-container -->
  	<div class="slideList"></div>
</div> <!-- end class gSlide -->