1.1.2 Слайдер на портал

Подскажите пожалуйста. Как прикрутить слайдер на Портал взамен стандартного.
Например такой или такой.
Взято от сюда http://bayguzin.ru/main/skriptyi/slajderyi.html?start=0

 

Вот сам аддон RecentSlider что выводится на Портал

 

Помогите, кто умеет. Хочу сам научится. Как для нашего движка это реализовать?

Инструкция к этому http://bayguzin.ru/demo/just_slider_files/ слайдеру такая:

Код:

$(document).ready(function(){
        $('.slider')._TMS({
            show:0,
            pauseOnHover:false,
            prevBu:'.prev',
            nextBu:'.next',
            playBu:'.play',
            duration:10000,
            preset:'zoomer',
            pagination:true,//'.pagination',true,''
            pagNums:false,
            slideshow:7000,
            numStatus:true,
            banners:'fromRight',// fromLeft, fromRight, fromTop, fromBottom
            waitBannerAnimation:false,
            progressBar:''
        })       
})

Код:

<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/tms-0.4.1.js"></script>
  <!-- demo -->
  <script type="text/javascript" src="js/demo.js"></script>
  <!-- end demo -->
    <script src="js/highlight.js"></script>
  <script src="js/html5.js"></script>
  <script src="js/html-xml.js"></script>
  <script src="js/css.js"></script>
  <script src="js/javascript.js"></script>
    <script>
    hljs.tabReplace = '    ';
    hljs.initHighlightingOnLoad();
  </script>
    <!--[if lt IE 7]>      <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
      <![endif]-->  <!--[if lt IE 9]>      <script type="text/javascript" src="js/html5.js"></script>    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
      <![endif]-->

Код:

<div id="main">
                        <div id="slide">
                                              <!-- slider -->
                            <div class="slider">
                                <ul class="items">
                                    <li><img src="images/slide-3.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
                                    <li><img src="images/slide-4.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li>
                                    <li><img src="images/slide-1.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
                                    <li><img src="images/slide-2.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
                                    <li><img src="images/slide-5.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras.</span></div></li>
                                    <li><img src="images/slide-6.jpg" alt="" /><div class="banner"><span>Woluptatem accusantium dolor massa astumosto Unde omnis iste natus errsit rem aper</span></div></li>
                                    <li><img src="images/slide-7.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
                                </ul>
                            </div>
                                <a href="#" class="prev">&lt;</a>
<a href="#" class="play"><em>stop</em><span>play</span></a>
<a href="#" class="next">&gt;</a>
                            <!-- slider end -->
                            </div>
    </div>