开发者

Simple vertical jcarousel not working

开发者 https://www.devze.com 2023-01-23 23:32 出处:网络
I\'m trying to reproduce the vertical jcarousel example show by the author in this page: http://sorgalla.com/projects/jcarousel/examples/static_vertical.html

I'm trying to reproduce the vertical jcarousel example show by the author in this page:

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

here is my html code:

  <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <link href="skin.css" rel="stylesheet" type="text/css" />
    <script src="jquery.jcaro开发者_如何学JAVAusel.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>

The result nothing,a list of images!!(NB:i have changed the images src="" so that i can ask my question) is there a problem?pls help.


You probably got your answer by now after 3 years :)
Your problem is you should jcarousel the div#slider. According to jCarousel documentation:

jCarousel expects a very basic HTML markup structure inside your HTML document:

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

This structure is only an example and not required. You could also use a structure like:

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

The only requirement is, that it consists of a root element, list element and item elements.

So your script should look like this:

<script type="text/javascript">
     $(document).ready(function() {
         $('#slider').jcarousel({
             vertical: true,
             scroll: 2
         });
     });
</script>


Have you set the css like :

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

and referred the script files :

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


Dont you need to load JQuery?

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

精彩评论

暂无评论...
验证码 换一张
取 消