<div id="jslidernews1" class="lof-slidecontent" style="width:980px; height:340px;">
       <div class="preload"><div></div></div>
                <!-- MAIN CONTENT -->    
                 <div class="main-slider-content" style="width:980px; height:340px;">
                   <ul class="sliders-wrap-inner">
                       <li>
                     <img src="images/thumbl_980x340.png" title="Новость 1" >              
                             <div class="slider-description">
                     <div class="slider-meta"><a target="_parent" title="Новость 1" href="#Category-1">/ Новость 1 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
                     <h4>Новость 1</h4>
                     <p>Один из лучших телефонов современности, хотите узнать больше...
                     <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                      <li>
                         <img src="images/thumbl_980x340_002.png" title="Новость 2" >              
                            <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Новость 2" href="#Category-2">/ Новость 2 /</a>     <i> — Четверг, Май 3, 2012 19:00</i></div>
                     <h4>Новость 2</h4>
                     <p>Отличнейший телефон с кучей нужных и не нужных функций...
                     <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                      <li>
                         <img src="images/thumbl_980x340_003.png" title="Новость 3" >               
                           <div class="slider-description">
                             <div class="slider-meta"><a target="_parent" title="Новость 3" href="#Category-3">/ Новость 3 /</a>     <i> — Четверг, Май 3, 2012 19:00</i></div>
                     <h4>Новость 3</h4>
                     <p>Просто возьмите мобильный в руки и вы не захотите его отдавать...
                     <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                       <li>
                         <img src="images/thumbl_980x340_004.png" title="Новость 4" >               
                           <div class="slider-description">
                             <div class="slider-meta"><a target="_parent" title="Новость 4" href="#Category-4">/ Новость 4 /</a>    <i> — Четверг, Май 3, 2012 19:00</i></div>
                     <h4>Новость 4</h4>
                     <p>Отличный девайс для интересного времяпрепровождения вне дома...
                     <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                       <li>
                         <img src="images/thumbl_980x340_005.png" title="Новость 5" >               
                           <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Новость 5" href="#">/ Новость 5 /</a>    <i> — Четверг, Май 3, 2012 19:00</i></div>
                    <h4>Новость 5</h4>
                     <p>Видели рекламу этого ноутбука по ТВ? Тогда обязательно посмотрите...
                     <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                       <li>
                  
                         <img src="images/thumbl_980x340_006.png" title="Новость 6" >               
                           <div class="slider-description">
                             <div class="slider-meta"><a target="_parent" title="Новость 6" href="#">/ Новость 6 /</a>    <i> — Четверг, Май 3, 2012 19:00</i></div>
                     <h4>Новость 6</h4>
                     <p>"Моя прелесть!" Иначе и не скажешь. Копите деньги друзья...
                     <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                        <li>
                         <img src="images/thumbl_980x340_007.png" title="Новость 7" >               
                           <div class="slider-description">
                             <div class="slider-meta"><a target="_parent" title="Новость 7" href="#">/ Новость 7 /</a>    <i> — Четверг, Май 3, 2012 19:00</i></div>
                     <h4>Новость 7</h4>
                     <p>Отличный ноутбук, но можно найти такой же и без перламутровых пуговиц...
                     <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                         <li>
                         <img src="images/thumbl_980x340_008.png" title="Новость 8" >               
                           <div class="slider-description">
              
                             <div class="slider-meta"><a target="_parent" title="Новость 8" href="#">/ Новость 8 /</a>    <i> — Четверг, Май 3, 2012 19:00</i></div>
                     <h4>Новость 8</h4>
                     <p>Ах планшет, планшет. А нужен ли ты вообще ?...
                      <a class="readmore" href="#">Подробнее</a>
                     </p>
                            </div>
                       </li>    
                     </ul>         
               </div>
               <!-- END MAIN CONTENT -->    
              <!-- NAVIGATOR -->
                  <div class="navigator-content">
                     <div class="button-next">Вперед</div>
                     <div class="navigator-wrapper">
                           <ul class="navigator-wrap-inner">
                    <li><img src="images/thumbs/thumbl_980x340.png" /></li>
                    <li><img src="images/thumbs/thumbl_980x340_002.png" /></li>
                    <li><img src="images/thumbs/thumbl_980x340_003.png" /></li>
                    <li><img src="images/thumbs/thumbl_980x340_004.png" /></li>       
                    <li><img src="images/thumbs/thumbl_980x340_005.png" /></li>
                    <li><img src="images/thumbs/thumbl_980x340_006.png" /></li>          
                    <li><img src="images/thumbs/thumbl_980x340_007.png" /></li>          
                    <li><img src="images/thumbs/thumbl_980x340_008.png" /></li>                  
                           </ul>
                     </div>
                     <div  class="button-previous">Назад</div>
                </div>    
             <!----------------- END OF NAVIGATOR --------------------->
             <!-- BUTTON PLAY-STOP -->
             <div class="button-control"><span></span></div>
              <!-- END OF BUTTON PLAY-STOP -->
                
    </div>

/* slider layout */
.lof-slidecontent { position:relative;    overflow:hidden;    border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{    height:100%;    width:100%;    position:absolute;    top:0;    left:0;    z-index:100000;    text-align:center;    background:#FFF}
.lof-slidecontent .preload div{    height:100%;    width:100%;    background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}

.lof-slidecontent  .sliders-wrapper{    position:relative;    height:100%;    width:900px;    z-index:3px;    overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{overflow:hidden;    background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;    padding:0px;    margin:0;    position:absolute;    overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{overflow:hidden;    padding:0px;margin:0px;    float:left;    position:relative;}
.lof-slidecontent  .lof-opacity  li{position:absolute;    top:0;    left:0;    float:inherit; }

.lof-slidecontent  .navigator-content {position:absolute; bottom:10px; right:10px;
       background:url(../images/transparent_bg.png) repeat;
       padding:5px 0px;
}
.lof-slidecontent  .navigator-wrapper{    position:relative;    z-index:10;
       height:180px;
       width:310px;
       overflow:hidden;
       color:#FFF;
       float:left
}
.lof-slidecontent  ul.navigator-wrap-inner{    top:0;    padding:0;    margin:0;    position:absolute;    width:100%; }
.lof-slidecontent  ul.navigator-wrap-inner li{ cursor:hand;     cursor:pointer;    list-style:none;    padding:0;    margin-left:0px;    overflow:hidden;    float:left;    display:block;    text-align:center;}

/*******************************************************/
       
ul.sliders-wrap-inner li img{    padding:0px;    }

.lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; }
.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
       z-index:100px;
       position:absolute;
       bottom:50px;
       left:0px;
       width:350px;
       background:url(../images/bg_trans.png);
       height:100px;
       padding:10px;
       color:#FFF;
}
.lof-slidecontent .slider-description h4 {    font-size: 14px;    margin: 10px 0;    padding: 0; }
.lof-slidecontent .slider-description .slider-meta a{       
       margin:0;
       background:#C01F25;
       font-size:75%;
       padding:2px 3px;
       font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
       text-transform:uppercase;
       text-decoration:none
}
.lof-slidecontent  .item-meta a:hover{    text-decoration:underline;}
.lof-slidecontent  .item-meta i {    font-size:70%; }

/* item navigator */

.lof-slidecontent ul.navigator-wrap-inner li img{
       border:#666 solid 3px;       
}
.lof-slidecontent ul.navigator-wrap-inner li.active img,    
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
       border:#A8A8A8 solid 3px;
       -moz-transition:border-color  ease-in-out 0.4s
}
.lof-slidecontent .navigator-content .button-next,    
.lof-slidecontent .navigator-content .button-previous{
       display:block;
       width:22px;
       height:30px;
       color:#FFF;
       cursor:pointer;

}
.lof-slidecontent .navigator-content .button-next {
       float:left;       
       text-indent:-999px;
       margin-right:5px;
       background:url(../images/arrow-l.png) no-repeat right center;
}
.lof-slidecontent .navigator-content .button-previous {
       float:left;       
       text-indent:-999px;
       margin-left:5px;
       background:url(../images/arrow-r.png) no-repeat left center;
}

.lof-slidecontent .button-control {
      position:absolute;
      top:10px;
      right:10px;
       height: 20px;
       width: 20px;
       cursor:hand; cursor:pointer;
       background:url(../images/transparent_bg.png) repeat;
}

.lof-slidecontent .button-control span { display:block;  width:100%; height:100%;}
.lof-slidecontent .action-start span  {
       background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
       background:url(../images/pause.png) no-repeat center center;
}

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
        <script language="javascript" type="text/javascript" src="js/script.js"></script>
Далее нужно инициализировать плагин (например, для Демо 1):
<script type="text/javascript">
    $(document).ready( function(){       
           // кнопки вперед и назад для слайдов
           var buttons = { previous:$('#jslidernews1 .button-previous') ,
                           next:$('#jslidernews1 .button-next') };               
            $('#jslidernews1').lofJSidernews( { interval : 4000,
                      direction        : 'opacitys',       
                      easing            : 'easeInOutExpo',
                      duration        : 1200,
                      auto             : true,
                      maxItemDisplay  : 4,
                      navPosition     : 'horizontal', // horizontal
                      navigatorHeight : 32,
                      navigatorWidth  : 80,
                      mainWidth        : 980,
                      buttons            : buttons } );       
       });
</script>