Using JAC

Setting Up Your Page

Before you can use JAC, you need to set up a carousel in your HTML.

The way you do this is to create a container and then an unordered list of what you would like to display:

            <div class="myJac">
                <ul>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                </ul>
            </div>
            

Initializing JAC

To use JAC, be sure to include jquery.jac.js and jquery.jac.css in your document head.

Then, use the following syntax to initialize your carousels.

            function init() {               
                
                // Setup galleries
                $(".myJac").jac();  
            }
                    
            $(init); // on DOM ready                         
            

Customizing Your Carousel

The carousel you just created is probably very boring. Luckily, you can fully customize how JAC looks.

Options

JAC supports options, which can be implemented like this:

            function init() {               
                
                // options
                var o = {
                    enableMouse: true,
                    childSizeFixed:false
                };
                
                // Setup galleries
                $(".myJac").jac(o);  
            }
                    
            $(init); // on DOM ready 
            

Here are all the options JAC supports:

childSizeFixed (true)

Whether or not the list items are of a fixed size.

Use true when you want to make sure the carousel always displays a fixed number of elements in the viewport.

Use false when the elements are not fixed size.

This must be set to false when enableMouse is true and the elements are not fixed size, otherwise erratic behavior will occur.

enableMouse (false)

Whether or not to enable mouse support for more interactivity.

When set to true the carousel will move the width of the viewport whenever you click Next or Previous.

carouselSelector ("carousel")

The CSS class of the actual carousel.

childSelector ("jac-content")

The CSS class of the <li> elements.

leftArrowSelector ("arrow-left")

The CSS class of the Left Arrow <a> link.

rightArrowSelector ("arrow-right")

The CSS class of the Right Arrow <a> link.

easingStyle ("swing")

The animation easing style to use when moving the carousel.

Accepts: easing or linear

rightText ("Next")

The text to display in the right arrow link.

leftText ("Previous")

The text to display in the left arrow link.

childSlideSpeed (300)

The speed with which a child should move to its new position when hovered over. Only applies when enableMouse is set to true.

parentSlideSpeed (600)

The speed with which the carousel should move to its new position.

fadeSpeed (300)

The speed with which the arrows should fade in and out.

CSS Styles

JAC is styled with a minimum set of CSS. The rest is up to you!

Typically, if you are using images, you do not need to do much styling. However, if you are using links with content, or just content, you may want to provide some additional styles.

For example, to customize the width of the viewport and the width and height of content elements, using our example above you can do the following:

            .myJac
            {
                width:400px;
            }
            .myJac .jac-content
            {
                width:200px;
            }           
            

That will set the width of the viewport and the width of the content elements.

A common task you will want to do is to style the arrows. Here is an example of better arrow links:

            .myJac .arrow-left, .myJac .arrow-right
            {
	            position:absolute;
	            top:25%;
	            z-index:5;
	            height:50px;
	            width:40px;
            }
            .myJac .arrow-left a, .myJac .arrow-right a
            {
	            display:block;
	            height:50px;
	            width:40px;
	            text-indent:-999em;
            }
            .myJac .arrow-left a:focus, .myJac .arrow-right a:focus
            {
	            outline:none;
            }
            .myJac .arrow-left
            {
	            left:-20px;
	            background:url(/lib/img/designs/gallery-arrows.png) no-repeat center left;
            }
            .myJac .arrow-right
            {
	            right:-20px;
	            background:url(/lib/img/designs/gallery-arrows.png) no-repeat center right;
            }      
            

This uses the Left Arrow and Right Arrow found on our Designs page.

The possibilities are endless and are beyond the scope of this documentation. We urge you to look at the Demos page for more examples of carousel designs.