Jquery image slider not working
<p>I have written the following code for image slider with jquery.  My intention  is to slide the images but all the images are appearing side by side. </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt; 
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0;  width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt; 
(function($) {
    $.fn.jFlow = function(options) {
        var opts = $.extend({}, $.fn.jFlow.defaults, options);
        var randNum = Math.floor(Math.random()*11);
        var jFC = opts.controller;
        var jFS =  opts.slideWrapper;
        var jSel = opts.selectedWrapper;

        var cur = 0;
        var timer;
        var maxi = $(jFC).length;
        // sliding function
        var slide = function (dur, i) {
            $(opts.slides).children().css({
                overflow:"hidden"
            });
            $(opts.slides + " iframe").hide().addClass("temp_hide");
            $(opts.slides).animate({
                marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
                },
                opts.duration*(dur),
                opts.easing,
                function(){
                    $(opts.slides).children().css({
                        overflow:"hidden"
                    });
                    $(".temp_hide").show();
                }
            );

        }
        $(this).find(jFC).each(function(i){
            $(this).click(function(){
                dotimer();
                if ($(opts.slides).is(":not(:animated)")) {
                    $(jFC).removeClass(jSel);
                    $(this).addClass(jSel);
                    var dur = Math.abs(cur-i);
                    slide(dur,i);
                    cur = i;
                }
            });
        }); 
        $(opts.slides).before('&lt;div id="'+jFS.substring(1, jFS.length)+'"&gt;&lt;/div&gt;').appendTo(jFS);

        $(opts.slides).find("div").each(function(){
            $(this).before('&lt;div class="jFlowSlideContainer"&gt;&lt;/div&gt;').appendTo($(this).prev());
        });
        //initialize the controller
        $(jFC).eq(cur).addClass(jSel);

        var resize = function (x){
            $(jFS).css({
                position:"relative",
                width: opts.width,
                height: opts.height,
                overflow: "hidden"
            });
            //opts.slides or #mySlides container
            $(opts.slides).css({
                position:"relative",
                width: $(jFS).width()*$(jFC).length+"px",
                height: $(jFS).height()+"px",
                overflow: "hidden"
            });
            // jFlowSlideContainer
            $(opts.slides).children().css({
                position:"relative",
                width: $(jFS).width()+"px",
                height: $(jFS).height()+"px",
                "float":"left",
                overflow:"hidden"
            });

            $(opts.slides).css({
                marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
            });
        }

        // sets initial size
        resize();

        // resets size
        $(window).resize(function(){
            resize();                         
        });

        $(opts.prev).click(function(){
            dotimer();
            doprev();

        });

        $(opts.next).click(function(){
            dotimer();
            donext();

        });

        var doprev = function (x){
            if ($(opts.slides).is(":not(:animated)")) {
                var dur = 1;
                if (cur &gt; 0)
                    cur--;
                else {
                    cur = maxi -1;
                    dur = cur;
                }
                $(jFC).removeClass(jSel);
                slide(dur,cur);
                $(jFC).eq(cur).addClass(jSel);
            }
        }

        var donext = function (x){
            if ($(opts.slides).is(":not(:animated)")) {
                var dur = 1;
                if (cur &lt; maxi - 1)
                    cur++;
                else {
                    cur = 0;
                    dur = maxi -1;
                }
                $(jFC).removeClass(jSel);
                //$(jFS).fadeOut("fast");
                slide(dur, cur);
                //$(jFS).fadeIn("fast");
                $(jFC).eq(cur).addClass(jSel);
            }
        }

        var dotimer = function (x){
            if((opts.auto) == true) {
                if(timer != null) 
                    clearInterval(timer);

                timer = setInterval(function() {
                        $(opts.next).click();
                        }, 3000);
            }
        }

        dotimer();
    };

    $.fn.jFlow.defaults = {
        controller: ".jFlowControl", // must be class, use . sign
        slideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        auto: false,
        easing: "swing",
        duration: 400,
        width: "100%",
        prev: ".jFlowPrev", // must be class, use . sign
        next: ".jFlowNext" // must be class, use . sign
    };

})(jQuery);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;span class="jFlowPrev"&gt;Prev&lt;/span&gt;
&lt;span class="jFlowControl"&gt;1&lt;/span&gt;
&lt;span class="jFlowNext"&gt;Next&lt;/span&gt;
&lt;div class="slide-wrapper"&gt;
    &lt;div class="slide-thumbnail"&gt;
        &lt;img src="img/01.jpg" /&gt;
    &lt;/div&gt;
    &lt;div class="slide-details"&gt;
        &lt;h2&gt; First&lt;!-- title here  for Img-1--&gt;&lt;/h2&gt;
        &lt;div class="description"&gt;
           First one &lt;!-- description here for Img-1. --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Kindly check any thing missed in the Jquery or any omissions there in the script</p>
