Closed virtan closed 10 years ago
Here is a code from installation page.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js?raw=1"></script> <style> .jcarousel { position: relative; overflow: hidden; width: 100%; } .jcarousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; } .jcarousel li { float: left; width: 100px; } </style> </head> <body> <div class="jcarousel"> <ul> <li><div style="height: 100px; width: 100px; background-color: red;"/></li> <li><div style="height: 100px; width: 100px; background-color: green;"/></li> <li><div style="height: 100px; width: 100px; background-color: blue;"/></li> </ul> </div> <script> $(function() { $('.jcarousel').jcarousel(); // $('.jcarousel').jcarousel('scroll', '+=2'); }); </script> </body> </html>
Nothing is shown except three side-to-side colored boxes. Nothing is moving.
Your carousel is 100% wide and your items only 100px. So, as long as your browser window is larger than 300px, nothing will happen.
A good starting point is the basic example.
Here is a code from installation page.
Nothing is shown except three side-to-side colored boxes. Nothing is moving.