CSS Example Request

[Ralphbar]

Is there anywhere I can view the css files for the horizontal example page? - it would be very useful for a newbie like me to figure things out...

[darsain]

All you need to know is in Markup Documentation.

[Ralphbar]

I will be doing that - thank-you. You have created such an elegant tool here.... I want to dive right in, but for a beginner it is quite hard to see how it works. I would love to be able to get your horizontal example page working on my test site so I can learn from a working example. I find this the fastest way to understand things. I've tried looking at the forum but as yet I haven't found a working example to analyse. Any help in this respect would be greatly appreciated.

[darsain]

HTML:

<div id="frame">
    <ul class="slidee">
        <li></li> // Item
        <li></li> // Item
        <li></li> // Item
    </ul>
</div>

CSS:

.frame { width: 100%; height: 160px; padding: 0; }
.frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 120px; height: 100%; }

JS:

var sly = new Sly('.frame', {
    horizontal: 1,
    itemNav: 'basic',
    scrollBy: 1
})

This creates a horizontal item based navigation with only mousewheel navigation enabled.

To know more, here is a documentation for each aspect of Sly and how to use it:

• Markup - How should the HTML look like.
• Calling - You can call Sly via a jQuery proxy, or directly by calling the Sly class, which provides a lot more control and functionality.
• Options - Detailed description of all available Sly options.
• Properties - All available Sly instance properties.
• Methods - Sly instance methods.
• Events - All events triggered by Sly and how to register callbacks to them.
• Parallax - How to initiate and use Sly in a parallax mode.