<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>