code.Atomic8Ball.com

jQuery Carousel Usage Instructions

  1. Confirm that site is running at least version 1.4.2 of jQuery
  2. Between the <head> & </head> tags add the following: <script type="text/javascript" src="http://code.atomic8ball.com/carousel/js/jquery.jcarousel.pack.js"></script>
  3. For a horizontal carousel add the following between the <head> & </head> tags: <script type="text/javascript">
    jQuery(document).ready(function () {
      jQuery('#mycarousel').jcarousel({
        scroll: 1
      });
    });
    </script>
    For a vertical carousel use: <script type="text/javascript">
    jQuery(document).ready(function () {
      jQuery('#mycarousel').jcarousel({
        scroll: 1,
        vertical: true
      });
    });
    </script>
    Note: You can replace scroll: 1 with any number to change the amount of boxes the carousel scrolls by, you can also add other options separated by commas. See the full list.
  4. Add the following HTML where you would like the carousel to show: <ul id="mycarousel" class="jcarousel-skin-xt">
        <li><img src="images/01.png" alt="1" height="100" width="100" /></li>
        <li><img src="images/02.png" alt="2" height="100" width="100" /></li>
        <li><img src="images/03.png" alt="3" height="100" width="100" /></li>
        <li><img src="images/04.png" alt="4" height="100" width="100" /></li>
    </ul>
    The content of each <li> will be one "block". You can fill it with text, images, or both.
  5. Add the following to your Stylesheet (.css) file:
    Note: The next/previous images are relatively pathed in these styles, so you may need to change the pathing, you can use the ones from the demo or make your own. /*******************global***********************/

    /*styles for the carousel container*/
    .jcarousel-skin-xt .jcarousel-container
    {
    display: block;
    width: 640px;
    }

    /*the size of your images or blocks*/
    .jcarousel-skin-xt .jcarousel-item
    {
    width: 100px;
    height: 100px;
    }

    /**/
    .jcarousel-skin-xt .jcarousel-item-placeholder
    {
    }

    /*don't touch*/
    .jcarousel-skin-xt .jcarousel-clip
    {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    }

    /*don't touch*/
    .jcarousel-skin-xt .jcarousel-container
    {
    position: relative;
    }

    /*don't touch*/
    .jcarousel-skin-xt .jcarousel-list
    {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    }

    /*set height and width to image or block size here*/
    .jcarousel-skin-xt .jcarousel-list li, .jcarousel-skin-xt .jcarousel-item
    {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    }

    /*don't touch*/
    .jcarousel-skin-xt .jcarousel-next
    {
    z-index: 3;
    display: none;
    }

    /*don't touch*/
    .jcarousel-skin-xt .jcarousel-prev
    {
    z-index: 3;
    display: none;
    }

    /*styles for the carousel container*/
    .jcarousel-skin-xt
    {

    }

    /*******************horizontal***********************/

    /*styles of the box the prev/next arrows sit outside of*/
    .jcarousel-skin-xt .jcarousel-container-horizontal
    {
    width: 640px;
    padding: 20px 40px;
    }

    /*styles for the container your blocks live in*/
    .jcarousel-skin-xt .jcarousel-clip-horizontal
    {
    width: 640px;
    height: 100px;
    }

    /*styles for the blocks*/
    .jcarousel-skin-xt .jcarousel-item-horizontal
    {
    margin-right: 30px;
    }

    /*styles for the next button*/
    .jcarousel-skin-xt .jcarousel-next-horizontal
    {
    position: absolute;
    top: 50px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(images/next-horizontal.png) no-repeat 0 0;
    }

    /*styles for the next button hover*/
    .jcarousel-skin-xt .jcarousel-next-horizontal:hover
    {
    background: transparent url(images/next-horizontal-hover.png) no-repeat 0 0;
    }

    /*styles for the previous button*/
    .jcarousel-skin-xt .jcarousel-prev-horizontal
    {
    position: absolute;
    top: 50px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(images/prev-horizontal.png) no-repeat 0 0;
    }

    /*styles for the previous button hover*/
    .jcarousel-skin-xt .jcarousel-prev-horizontal:hover
    {
    background: transparent url(images/prev-horizontal-hover.png) no-repeat 0 0;
    }

    /*******************vertical***********************/

    /*styles of the box the prev/next arrows sit outside of*/
    .jcarousel-skin-xt .jcarousel-container-vertical
    {
    width: 100px;
    height: 600px;
    padding: 40px 20px;
    }

    /*styles for the container your blocks live in*/
    .jcarousel-skin-xt .jcarousel-clip-vertical
    {
    width: 100px;
    height: 600px;
    }

    /*styles for the next button*/
    .jcarousel-skin-xt .jcarousel-next-vertical
    {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(images/next-vertical.png) no-repeat 0 0;
    }

    /*styles for the next button hover*/
    .jcarousel-skin-xt .jcarousel-next-vertical:hover
    {
    background: transparent url(images/next-vertical-hover.png) no-repeat 0 0;
    }

    /*styles for the previous button*/
    .jcarousel-skin-xt .jcarousel-prev-vertical
    {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(images/prev-vertical.png) no-repeat 0 0;
    }


    /*styles for the previous button hover*/
    .jcarousel-skin-xt .jcarousel-prev-vertical:hover
    {
    background: transparent url(images/prev-vertical-hover.png) no-repeat 0 0;
    }
Property Type Default Description
vertical bool false Specifies wether the carousel appears in horizontal or vertical orientation. Changes the carousel from a left/right style to a up/down style carousel.
start integer 1 The index of the item to start with.
offset integer 1 The index of the first available item at initialisation.
size integer Number of existing <li> elements if size is not passed explicitly The number of total items.
scroll integer 3 The number of items to scroll by.
visible integer null If passed, the width/height of the items will be calculated and set depending on the width/height of the clipping, so that exactly that number of items will be visible.
animation mixed "fast" The speed of the scroll animation as string in jQuery terms ("slow" or "fast") or milliseconds as integer (See jQuery Documentation). If set to 0, animation is turned off.
easing string null The name of the easing effect that you want to use (See jQuery Documentation).
auto integer 0 Specifies how many seconds to periodically autoscroll the content. If set to 0 (default) then autoscrolling is turned off.
wrap string null Specifies whether to wrap at the first/last item (or both) and jump back to the start/end. Options are "first", "last" or "both" as string. If set to null, wrapping is turned off (default). You can also pass "circular" as option to enable support for circular carousels.
initCallback function null JavaScript function that is called right after initialisation of the carousel. Two parameters are passed: The instance of the requesting carousel and the state of the carousel initialisation (init, reset or reload)
itemLoadCallback function null JavaScript function that is called when the carousel requests a set of items to be loaded. Two parameters are passed: The instance of the requesting carousel and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
 
itemLoadCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemFirstInCallback function null JavaScript function that is called (after the scroll animation) when an item becomes the first one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the <li> object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
 
itemFirstInCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemFirstOutCallback function null JavaScript function that is called (after the scroll animation) when an item isn't longer the first one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the <li> object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
 
itemFirstOutCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemLastInCallback function null JavaScript function that is called (after the scroll animation) when an item becomes the last one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the <li> object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
 
itemLastInCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemLastOutCallback function null JavaScript function that is called when an item isn't longer the last one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the <li> object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
 
itemLastOutCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemVisibleInCallback function null JavaScript function that is called (after the scroll animation) when an item is in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the <li> object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
 
itemVisibleInCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemVisibleOutCallback function null JavaScript function that is called (after the scroll animation) when an item isn't longer in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the <li> object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
 
itemVisibleOutCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
buttonNextCallback function null JavaScript function that is called when the state of the 'next' control is changing. The responsibility of this method is to enable or disable the 'next' control. Three parameters are passed: The instance of the requesting carousel, the control element and a flag indicating whether the button should be enabled or disabled.
buttonPrevCallback function null JavaScript function that is called when the state of the 'previous' control is changing. The responsibility of this method is to enable or disable the 'previous' control. Three parameters are passed: The instance of the requesting carousel, the control element and a flag indicating whether the button should be enabled or disabled.
buttonNextHTML string <div></div> The HTML markup for the auto-generated next button. If set to null, no next-button is created.
buttonPrevHTML string <div></div> The HTML markup for the auto-generated prev button. If set to null, no prev-button is created.
buttonNextEvent string "click" Specifies the event which triggers the next scroll.
buttonPrevEvent string "click" Specifies the event which triggers the prev scroll.