Не работает jquery scroller

Question

Я попробовал запустить скроллер Malihu на своем сайте (http://manos.malihu.gr/jquery-thumbnail-scroller/), к сожалению, я не могу заставить его работать на моем сайте. Не могли бы вы сказать мне, что я делаю что-то неправильно?

(я думаю, что, возможно, проблема где-то вокруг этого кода не знаю ...?)

<div id="zelena"> 

<div id="mg1">mg1</div> 
<div id="mg2">mg2</div> 
<div id="mg3">mg3</div> 
<div id="mg4">mg4</div> 
<div id="mg5">mg5</div> 

<br> 

<div id="akt1">akt1</div> 
<div id="akt2">akt2</div> 
<div id="akt3">akt3</div> 
<div id="akt4">akt4</div> 
<div id="akt5">akt5</div> 

<br> 

<div id="prip1">prip1</div> 
<div id="prip2">prip2</div> 
<div id="prip3">prip3</div> 
<div id="prip4">prip4</div> 
<div id="prip5">prip5</div> 

<br> 

<div id="min1">min1</div> 
<div id="min2">min2</div> 
<div id="min3">min3</div> 
<div id="min4">min4</div> 
<div id="min5">min5</div> 

<br> 

</div> <!-- koneC#zelena --> 

Вот код: http://jsfiddle.net/Lz6fo597/ eventualy все файлы: http://www.filedropper.com/mgwebslide Спасибо в dvance.

Answer 1

Прежде всего, я считаю, что для правильного использования этого плагина вы должны использовать элементы ul, а не только div. Например, вместо того:

<div id="zelena"> 
    <div id="mg1">mg1</div> 
    <div id="mg2">mg2</div> 
    <div id="mg3">mg3</div> 
    <div id="mg4">mg4</div> 
    <div id="mg5">mg5</div> 
</div> 

вы должны будете использовать это:

<div id="zelena"> 
    <ul> 
     <li id="msg1">msg1</li> 
     <li id="msg2">msg2</li> 
     <li id="msg3">msg3</li> 
     <li id="msg4">msg4</li> 
     <li id="msg5">msg5</li> 
    </ul> 
</div> 

То есть, я также думаю, что вы не можете иметь один полоса прокрутки, действующая на кратномуul, так это:

<div id="zelena"> 
    <ul> 
     <li id="msg1">msg1</li> 
     <li id="msg2">msg2</li> 
     <li id="msg3">msg3</li> 
     <li id="msg4">msg4</li> 
     <li id="msg5">msg5</li> 
    </ul> 

    <ul> 
     <li id="akt1">akt1</li> 
     <li id="akt2">akt2</li> 
     <li id="akt3">akt3</li> 
     <li id="akt4">akt4</li> 
     <li id="akt5">akt5</li> 
    </ul> 
</div> 

не будет работать, и поэтому вам нужно будет что-то сделать это:

<div id="zelena"> 
    <ul> 
     <li id="msg1">msg1</li> 
     <li id="msg2">msg2</li> 
     <li id="msg3">msg3</li> 
     <li id="msg4">msg4</li> 
     <li id="msg5">msg5</li> 

     <li id="akt1">akt1</li> 
     <li id="akt2">akt2</li> 
     <li id="akt3">akt3</li> 
     <li id="akt4">akt4</li> 
     <li id="akt5">akt5</li> 

     <li id="prip1">prip1</li> 
     <li id="prip2">prip2</li> 
     <li id="prip3">prip3</li> 
     <li id="prip4">prip4</li> 
     <li id="prip5">prip5</li> 

     <li id="min1">min1</li> 
     <li id="min2">min2</li> 
     <li id="min3">min3</li> 
     <li id="min4">min4</li> 
     <li id="min5">min5</li> 
    </ul> 
</div> 

в сочетании с некоторыми CSS стайлинга.

Наконец будьте осторожны при использовании JQuery с jsFiddle, как я, к примеру, был некоторые проблемы в вызове функции инициализации, как по умолчанию jsFiddle выполняет яваскрипт кода после загрузки страницы и, следовательно, это:

(function($){ 
    $(window).load(function(){ 
     $("#zelena").mThumbnailScroller({ 
      axis:"x", 
      type:"hover-100" 
     }); 
    }); 
})(jQuery); 

может вызвать проблемы, пока это:

$("#zelena").mThumbnailScroller({ 
    axis:"x", 
    type:"hover-100" 
}); 

должно работать.

Вы можете взглянуть на этот Fiddle, где я попытался получить аналогичный «структурный» результат с тем, который вы предоставили.