scenic forum

Simple jQuery Slider

by Lukasz Baran

HTML

<body>
    <ul class="slide">
        <li><a href="http://czaniec.pl/" style="font-size: 11.8181819915771px; text-align: center;"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/8_czaniec.png" style="width: 121px; height: 35px;"></a></li>
			
            <li><a href="http://fotoexpertkielce.pl/" style="font-size: 11.8181819915771px; text-align: center;"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/9_expert.png" style="width: 87px; height: 35px;"></a>			</li>
                <li><a href="http://www.renault.pl/swiat-renault/klub-milosnikow-renault/fankluby/" style="font-size: 11.8181819915771px; text-align: center;"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/11_renault.png" style="width: 37px; height: 35px;"></a></li>
                    <li><a href="http://www.mxnowicki.pl/"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/18_mx_nowicki.png" style="font-size: 11.8181819915771px; text-align: center; height: 35px;"></a></li>
			
                        <li><a href="http://www.strefakulturalnejjazdy.pl/" style="font-size: 11.8181819915771px; text-align: center;"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/12_strefakultur.png" style="width: 98px; height: 35px;"></a></li>
			
                            <li><a href="http://zumba.waw.pl" style="font-size: 11.8181819915771px; text-align: center;"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/13_zumba.png" style="width: 104px; height: 35px;"></a></li>
			
                                <li><a href="http://francuskie.pl"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/15_francuskie.png" style="width: 128px; height: 35px;"></a></li>
			
				
			
                                    <li><a href="http://linuxpl.com"><img alt="" src="http://scenic-forum.pl/grafiki/pasek/17_linux.png" style="width: 90px; height: 35px;"></a></li>
  				
			
                                        <li><a href="http://forum.cabrio-club.pl/"><img alt=""...

CSS

html, body {
    margin:0
}
ul.slide {
    margin:0;
    padding:0;
    /*height:125px;*/
    list-style-type:none;
    overflow: hidden;
}
ul.slide li {
    float:left;
    list-style-type:none;
}
ul.slide img {
    /*border:1px solid silver;*/
    border: none;
    height:125px;
}

JavaScript

//Plugin start
 (function ($) {
     var methods = {
         init: function (options) {
             return this.each(function () {
                 var _this = $(this);
                 _this.data('marquee', options);
                 var _li = $('>li', _this);

                 _this.wrap('<div class="slide_container"></div>')
                     .height(_this.height())
                     .hover(function () {
                     if ($(this).data('marquee').stop) {
                         $(this).stop(true, false);
                     }
                 },

                 function () {
                     if ($(this).data('marquee').stop) {
                         $(this).marquee('slide');
                     }
                 })
                     .parent()
                     .css({
                     position: 'relative',
                     overflow: 'hidden',
                     'height': $('>li', _this).height()
                 })
                     .find('>ul')
                     .css({
                     width: screen.width * 2,
                     position: 'absolute'
                 });

                 for (var i = 0; i < Math.ceil((screen.width * 3) / _this.width()); ++i) {
                     _this.append(_li.clone());
                 }

                 _this.marquee('slide');
             });
         },

         slide: function () {
             var $this = this;
             $this.animate({
                 'left': $('>li', $this).width() * -1
             },
             $this.data('marquee').duration,
                 'swing',

             function () {
                 $this.css('left', 0).append($('>li:first', $this));
                 $this.delay($this.data('marquee').delay).marquee('slide');

             });

         }
     };

     $.fn.marquee = function (m) {
         var settings = {
             'delay': 2000,
                 'duration': 900,
                 'stop': true
         };

         if...