Mootools - Как сделать слайдер новостей (тикер) со стрелками

Question

Я разрабатываю веб-сайт, используя Mootools как фреймворк Javascript.

Мне нужно, чтобы последние новости циркулировали в горизонтальном тикете новостей в верхней части страницы. Я хочу иметь 4 или 5 различных новостей (в общей сложности 20) виски в одно и то же время и вращаться.

Я нашел следующий чистый скрипт:

/* ImageSlider 
* version 0.1 * 
* Copyright (c) 2008-2010 ecce media Ltd (www.eccemedia.com) * 
    * http://www.eccemedia.com/blog/blog.html&blogid=5 * 
    */ 


    var ImageSlider = new Class({ 
     Implements: [Options], 
     options: { 
      sliders: 'slider-list', 
      transitionduration:5000, 
      autorotate:true, 
      transition:Fx.Transitions.linear 
     }, 
     initialize: function(options) { 
      this.setOptions(options); 
      var c = this; 
      var op = this.options; 
      if(op.autorotate) this.animate(); 
      $(op.sliders).addEvent('mouseover',function(){op.SlideFX.pause();}); 
      $(op.sliders).addEvent('mouseleave',function(){op.SlideFX.resume();}); 

     }, 
     animate:function(){ 
      var c = this; 
      var op = this.options; 
      var sliders = $$('#'+op.sliders+' li'); 
      if(sliders.length>0){ 
       op.SlideFX = new Fx.Tween(sliders[0],{'transition':op.transition,'duration':op.transitionduration,'onComplete':function(){ 
        sliders[0].inject($(op.sliders)); 
        sliders[0].setStyle('margin-left',0); 
        c.animate(); 
       }}); 
       op.SlideFX.start('margin-left', -sliders[0].getSize().x); 
      } 
     } 
    }); 

var sliderID = new ImageSlider({'sliders':'TickerHorizontal','transitionduration':6000}); 

Html выглядит

<div id="TickerHorizontal"> 
<ul> 
<li>.....</li> 
<li>.....</li> 
<li>.....</li> 
</ul> 
</div> 

Скрипт работает хорошо в обоих скольжения и остановки при наведении мыши, но я изо всех сил в добавление кнопки для перемещения вперед и назад вручную

Любое предложение?

Answer 1

Хорошо, нашли большой Mootools галереи, которая делает именно то, что мне нужно, и даже больше: https://github.com/ginger/slideGallery