2010-11-09 3 views
0

Я пытаюсь воспроизвести вертикальный jcarousel пример показывает автор в этой страницы:Простые вертикальные jcarousel не работает

http://sorgalla.com/projects/jcarousel/examples/static_vertical.html

вот мой HTML код:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <link href="skin.css" rel="stylesheet" type="text/css" /> 
    <script src="jquery.jcarousel.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#mycarousel').jcarousel({ 
      vertical: true, 
      scroll: 2 
     }); 
    }); 

</script> 

</head> 

<body > 
    <form id="form1" runat="server"> 
    <div class="FinKaynDiv"> 

    <div id="slider"> 

    <ul id="mycarousel" class="jcarousel jcarousel-skin-tango"> 
       <li>Image1</li> 
       <li>Image2</li> 
       <li>Image3</li> 
       <li>Image4</li> 
       <li>Image5</li> 
       <li>Image6</li> 

      </ul> 
    </div> 



    </div> 
</form> 

</body> 
</html> 

Результат ничего, список изображений !! (NB: я изменил изображения src = "", чтобы я мог задать свой вопрос) есть проблема?

ответ

0

Вы установите CSS, как:

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango"> 

и передала файлы сценария:

<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script> 
<!-- 
    jCarousel skin stylesheet 
--> 
<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" /> 
+0

Да, я скопировал именно те файлы, которые находятся в http://sorgalla.com/projects/jcarousel/examples/static_vertical.html – Cooly

0

DonT вам необходимо загрузить JQuery?

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script> 
+0

Я добавил файл jquery lib, я использую его на других страницах. – Cooly

+0

мог бы проверить пример в приведенной выше ссылке. – Cooly

+0

В каком браузере? – sanders

1

Вы, вероятно, получил ответ на свой вопрос уже после 3-х лет :)
Ваша проблема в том, вы должны jcarousel в div#slider. Согласно jCarousel документации:

jCarousel ожидает очень базовую структуру HTML разметки внутри HTML документа:

<div class="jcarousel"> <--------------------------------| Root element 
    <ul> <-------------------------------| List element | 
     <li>...</li> <---| Item element |    | 
     <li>...</li> <---| Item element |    | 
    </ul> <------------------------------|    | 
</div> <-------------------------------------------------| 

Эта структура является лишь примером и не требуется. Вы можете также использовать структуру, как:

<div class="mycarousel"> <-------------------------------| Root element 
    <div> <------------------------------| List element | 
     <p>...</p> <-----| Item element |    | 
     <p>...</p> <-----| Item element |    | 
    </div> <-----------------------------|    | 
</div> <-------------------------------------------------| 

Единственное требование в том, что она состоит из корневого элемента, список элементов и элементов элементов.

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

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#slider').jcarousel({ 
      vertical: true, 
      scroll: 2 
     }); 
    }); 
</script> 
Смежные вопросы