Parameters:

• options Object

  Initial configurations

  • selector Object

    The carousel elements

    • container String|jQueryObject|DOMElement

      The carousel container.

    • [slides] String|jQueryObject|DOMElement Optional

      The carousel slides.

    • [start] String|jQueryObject|DOMElement Optional

      Clickable elements that will switch the carousel to the first slide.

    • [prev] String|jQueryObject|DOMElement Optional

      Clickable elements that will switch the carousel to the previous slide.

    • [next] String|jQueryObject|DOMElement Optional

      Clickable elements that will switch the carousel to the next slide.

    • [end] String|jQueryObject|DOMElement Optional

      Clickable elements that will switch the carousel to the last slide.

    • [items] String|jQueryObject|DOMElement Optional

      Clickable parent container of elements that will switch the carousel to a specific slide, assumes the children are in slide order.

    • [item] String|jQueryObject|DOMElement Optional

      Clickable elements that will switch the carousel to a specific slide via the data-kafecarousel-target attribute.

    • [play] String|jQueryObject|DOMElement Optional

      Clickable elements that will switch the carousel to autoplay.

    • [pause] String|jQueryObject|DOMElement Optional

      Clickable elements that will stop the autoplay of the carousel.

    • [position] String|jQueryObject|DOMElement Optional

      Elements that will contain the current position.

    • [total] String|jQueryObject|DOMElement Optional

      Elements that will contain the total number of slides.

    • [status] String|jQueryObject|DOMElement Optional

      Elements that will contain a list of bullets indicating the status of the carousel.

    • [statusNum] String|jQueryObject|DOMElement Optional

      Elements that will contain a list of numbers indicating the status of the carousel.

  • [wrap = true] Boolean Optional

    If true, will loop back to the first slide upon reaching the last one. The same is enabled in reverse.

  • [transition = 'slideLeft'] String Optional

    Animation used during a transition. Possible values are slideLeft, slideRight, slideUp, slideDown and fade.

  • [speed = 500] Number Optional

    Duration (in milliseconds) of the transition.

  • [startId = 1] Number Optional

    Index of the starting slide, starting at 1.

  • [autostart] Object Optional

    Allows slides to change without a user interaction after a chosen delay.

    • [interval = 3000] Number Optional

      Delay (in milliseconds) before starting a transition to the next slide. The transition duration is included in the delay. As an example, an interval of 3000 combined with a speed of 500 will hold a slide still for 2500 milliseconds before starting the transition.

  • [preSwitchCallback] Function Optional

    Trigged upon receiving an instruction to change the current slide but before starting the transition. The following object is passed as a first argument:

    • data Object

      An object containing information relative to the transition in progress.

    • data.action String

      Current action being performed. Possible values are prev, next or item when using a specific index.

    • data.source Object

      Information about the slide being changed.

    • data.source.position Number

      Index of the source slide.

    • data.source.obj DOMElement

      Reference to the source slide.

    • data.target Object

      Information about the destination slide.

    • data.target.position Number

      Index of the target slide.

    • data.target.obj DOMElement

      Reference to the target slide.

  • [postSwitchCallback] Function Optional

    Trigged upon receiving an instruction to change the current slide but before starting the transition. Passes the same argument object as the preSwitchCallback.

  • [statusLink = false] Boolean Optional

    If true, will generate navigation links in elements linked to the carousel via data-kafecarousel-id and the data-kafecarousel-action="status" attribute.

  • [statusBullet = '•'] String Optional

    Text used as the content of generated link in a statusLink navigation.

  • [pauseOnHover = true] Boolean Optional

    If true, autoswitch will be paused while the mouse hovers a slide.

Example:

// Sample carousel structure
					<section class="home-carousel">
					    <ul class="home-slides">
					        <li><a href="#"><img src="/images/slide-01.jpg" /></a></li>
					        <li><a href="#"><img src="/images/slide-01.jpg" /></a></li>
					        <li><a href="#"><img src="/images/slide-01.jpg" /></a></li>
					    </ul>
					    <span class="home-prev">Back</span>
					    <span class="home-next">Next</span>
					    <div class="home-status"></div>
					</section>

// Attach behaviors using...
					var myCarousel = kafe.plugin.carousel({ selector: { container: '.home-slides' } });

// Carousels can be remotely interacted with using custom data attributes...
					var myCarousel = kafe.plugin.carousel({ selector: { container: '.home-slides' } });

// The jQuery alternative...
					$('.home-slides').kafeCarousel('init', {});

Parameters:

• target String|Number

  Action or 1-based slide position

Example:

// Go to next slide
					myCarousel.change('next');

// Go to first slide 
					myCarousel.change(1);

// The jQuery alternative...
					$('#home-slides').kafeCarousel('change', 1);