Простая вертикальная 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>

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


jquery jcarousel
person Cooly    schedule 09.11.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы, вероятно, уже получили свой ответ через 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>
person Pedram Behroozi    schedule 30.12.2013

arrow_upward
0
arrow_downward

Вы установили 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" />
person Siva Gopal    schedule 09.11.2010
comment
Да, я скопировал именно те файлы, которые находятся в sorgalla.com/projects/jcarousel/ примеры/static_vertical.html - person Cooly; 09.11.2010

arrow_upward
0
arrow_downward

Вам не нужно загружать JQuery?

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
person sanders    schedule 09.11.2010
comment
Я добавил файл jquery lib, я использую его на других страницах. - person Cooly; 09.11.2010
comment
Не могли бы вы проверить пример по ссылке выше. - person Cooly; 09.11.2010