jsor / jcarousel

Riding carousels with jQuery.
https://sorgalla.com/jcarousel/
MIT License
1.99k stars 736 forks source link

Installation example doesnt work #636

Closed virtan closed 10 years ago

virtan commented 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.

jsor commented 10 years ago

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.