Pretty simple content slider
<p>I´m trying to implementig Pretty Simple Content Slider from 
<a href="http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/" rel="nofollow">http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/</a>
but when i try to put the same code twice the second module don't work.</p>

<p>Any ideas?
Thanks</p>

<pre><code>     &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
     &lt;html&gt;
     &lt;head&gt;
    &lt;title&gt;Pretty Simple Content Slider with jQuery and CSS3&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
    &lt;meta name="description" content="Pretty Simple Content Slider with jQuery and CSS3" /&gt;
    &lt;meta name="keywords" content="jquery,css3, content slider, slide, auto-play"/&gt;
    &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/&gt;

    &lt;style&gt;
        *{
            margin:0;
            padding:0;
        }
        body{
            font-family:Arial;
            background:#C1C7D5 url(title.png) no-repeat top center;
        }
        a.back{
            background:transparent url(back.png) no-repeat top left;
            position:fixed;
            width:150px;
            height:27px;
            outline:none;
            bottom:0px;
            left:0px;
        }
        #content{
            margin:150px auto 10px auto;
        }
        .reference{
            clear:both;
            width:800px;
            margin:30px auto;
        }
        .reference p a{
            text-transform:uppercase;
            text-shadow:1px 1px 1px #fff;
            color:#666;
            text-decoration:none;
            font-size:10px;
        }
        .reference p a:hover{
            color:#333;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="content"&gt;
        &lt;a class="back" href=""&gt;&lt;/a&gt;

        &lt;div class="rotator"&gt;
            &lt;ul id="rotmenu"&gt;
                &lt;li&gt;
                    &lt;a href="rot1"&gt;Portfolio&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;1.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;Our Works&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident... 
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot2"&gt;Services&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;2.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;We serve&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident...
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot3"&gt;Contact&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;3.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;Get in touch&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident...
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot4"&gt;Experiments&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;4.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;We do crazy stuff&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident...
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot5"&gt;Applications&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;5.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;Working things&lt;/div&gt;
                        &lt;div class="info_description"&gt;
                            At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium 
            voluptatum deleniti atque corrupti quos dolores et 
            quas molestias excepturi sint occaecati cupiditate 
            non provident... 
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;div id="rot1"&gt;
                &lt;img src="" width="800" height="300" class="bg" alt=""/&gt;
                &lt;div class="heading"&gt;
                    &lt;h1&gt;&lt;/h1&gt;
                &lt;/div&gt;
                &lt;div class="description"&gt;
                    &lt;p&gt;&lt;/p&gt;

                &lt;/div&gt;    
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="reference"&gt;
        &lt;p&gt;&lt;a href="http://www.flickr.com/photos/jrparis/106493273/"&gt;1 http://www.flickr.com/photos/jrparis/106493273/&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="http://www.flickr.com/photos/aussiegall/2104652119/"&gt;2 http://www.flickr.com/photos/aussiegall/2104652119/&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="http://www.flickr.com/photos/intherough/4396089594/"&gt;3 http://www.flickr.com/photos/intherough/4396089594/&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="http://www.flickr.com/photos/lightknight/628680053/"&gt;4 http://www.flickr.com/photos/lightknight/628680053/&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="http://www.flickr.com/photos/nguyendai/404631197/"&gt;5 http://www.flickr.com/photos/nguyendai/404631197/&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
        &lt;a class="back" href=""&gt;&lt;/a&gt;

        &lt;div class="rotator"&gt;
            &lt;ul id="rotmenu"&gt;
                &lt;li&gt;
                    &lt;a href="rot1"&gt;Portfolio&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;1.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;Our Works&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident... 
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot2"&gt;Services&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;2.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;We serve&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident...
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot3"&gt;Contact&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;3.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;Get in touch&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident...
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot4"&gt;Experiments&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;4.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;We do crazy stuff&lt;/div&gt;
                        &lt;div class="info_description"&gt;
             At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium
            voluptatum deleniti atque corrupti quos dolores et
            quas molestias excepturi sint occaecati cupiditate
            non provident...
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="rot5"&gt;Applications&lt;/a&gt;
                    &lt;div style="display:none;"&gt;
                        &lt;div class="info_image"&gt;5.jpg&lt;/div&gt;
                        &lt;div class="info_heading"&gt;Working things&lt;/div&gt;
                        &lt;div class="info_description"&gt;
                            At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium 
            voluptatum deleniti atque corrupti quos dolores et 
            quas molestias excepturi sint occaecati cupiditate 
            non provident... 
                            &lt;a href="#" class="more"&gt;Read more&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;div id="rot1"&gt;
                &lt;img src="" width="800" height="300" class="bg" alt="" style="left: 0px; top: 0px"/&gt;
                &lt;div class="heading"&gt;
                    &lt;h1&gt;&lt;/h1&gt;
                &lt;/div&gt;
                &lt;div class="description"&gt;
                    &lt;p&gt;&lt;/p&gt;

                &lt;/div&gt;    
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;


    &lt;!-- The JavaScript --&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jquery.easing.1.3.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;

        $(function() {
            var current = 1;

            var iterate     = function(){
                var i = parseInt(current+1);
                var lis = $('#rotmenu').children('li').size();
                if(i&gt;lis) i = 1;
                display($('#rotmenu li:nth-child('+i+')'));
            }
            display($('#rotmenu li:first'));
            var slidetime = setInterval(iterate,3000);

            $('#rotmenu li').bind('click',function(e){
                clearTimeout(slidetime);
                display($(this));
                e.preventDefault();
            });

            function display(elem){
                var $this   = elem;
                var repeat  = false;
                if(current == parseInt($this.index() + 1))
                    repeat = true;

                if(!repeat)
                    $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                        $(this).animate({'opacity':'0.7'},700);
                    });

                current = parseInt($this.index() + 2);

                var elem = $('a',$this);

                    elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

                var info_elem = elem.next();
                $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                    $('h1',$(this)).html(info_elem.find('.info_heading').html());
                    $(this).animate({'left':'0px'},400,'easeInOutQuad');
                });

                $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                    $('p',$(this)).html(info_elem.find('.info_description').html());
                    $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
                })
                $('#rot1').prepend(
                $('&lt;img/&gt;',{
                    style   :   'opacity:0',
                    className : 'bg'
                }).load(
                function(){
                    $(this).animate({'opacity':'1'},600);
                    $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                        $(this).remove();
                    });
                }
            ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
            );
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p></p>
