Carousel bootstrap-carousel.js

  • Example carousel

    • The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

    <div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
    Heads up! When implementing this carousel, remove the images we have provided and replace them with your own.

  • Usage

    • Via data attributes

      • Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

    • Via JavaScript

      • Call carousel manually with:

      $('.carousel').carousel()

  • Options

    • Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as in data-interval="".

    Name type default description
    interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
    pause string "hover" Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

  • Methods

    • .carousel(options)

      • Initializes the carousel with an optional options object and starts cycling through items.

      $('.carousel').carousel({
  interval: 2000
})
    • .carousel('cycle')

      • Cycles through the carousel items from left to right.

    • .carousel('pause')

      • Stops the carousel from cycling through items.

    • .carousel(number)

      • Cycles the carousel to a particular frame (0 based, similar to an array).

    • .carousel('prev')

      • Cycles to the previous item.

    • .carousel('next')

      • Cycles to the next item.

  • Events

    • Bootstrap's carousel class exposes two events for hooking into carousel functionality.

    Event Description
    slide This event fires immediately when the slide instance method is invoked.
    slid This event is fired when the carousel has completed its slide transition.

Typeahead bootstrap-typeahead.js

  • Example

    • A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

    <input type="text" data-provide="typeahead">

    You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

  • Usage

    • Via data attributes

      • Add data attributes to register an element with typeahead functionality as shown in the example above.

    • Via JavaScript

      • Call the typeahead manually with:

      $('.typeahead').typeahead()

  • Options

    • Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

    Name type default description
    source array, function [ ] The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
    items number 8 The max number of items to display in the dropdown.
    minLength number 1 The minimum character length needed before triggering autocomplete suggestions
    matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
    sorter function exact match,
    case sensitive,
    case insensitive    		 Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
    updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
    highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

  • Methods

    • .typeahead(options)

      • Initializes an input with a typeahead.


Affix bootstrap-affix.js

  • Example

    • The subnavigation on the left is a live demo of the affix plugin.

  • Usage

    • Via data attributes

      • To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

      <div data-spy="affix" data-offset-top="200">...</div>
      Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
    • Via JavaScript

      • Call the affix plugin via JavaScript:

      $('#navbar').affix()

  • Options

    • Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

    Name type default description
    offset number | function | object 10 Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs).