Iheartweb

<!-- Utilities/Helper -->
<script src="/path_to_your/underscore.js"></script>
<!-- CommonJS Loader -->
<script src="/path_to_your/inject.js"></script>
<!-- UI/DOM -->
<script src="/path_to_your/jquery-1.7.js"></script>
<!-- Configuration -->
<script src="/path_to_your/lu-config.js"></script>

<!-- Note: Both Underscore and jQuery are CommonJS compliant. Alternatively, they can be loaded with Inject. -->

Iheartweb

//Set the path to lu.js on your server. For cross-domain paths see:
//https://github.com/linkedin/inject
PATH_TO_LU = '/path_to_your/lu.js',
//Set the path to where your lu-controls folder.
PATH_TO_LU_CONTROLS = '/path_to_your/lu-controls/',
//For older browsers Lu uses Crockford's Json Library.
PATH_TO_JSON2 = '/path_to_your/json2.js',
//Lu will log messages in the console. Set the level of logging from 0 to 4
DEBUG = 0;

Iheartweb

<script type="text/javascript">
    require.ensure( ['lu'], function() {} );
</script>

Iheartweb

<div data-lu="Carousel">
  <ol>
    <li class="lu-selected">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ol>
  <button data-lu="Button:Previous">Previous</button>
  <button data-lu="Button:Next">Next</button>
</div>

Iheartweb

<ol data-lu="Carousel">
	<li class="one lu-selected">One</li>
	<li class="two">Two</li>
	<li class="three">Three</li>
	<li class="four">Four</li>
	<li class="five">Five</li>
</ol>

Iheartweb

<ol data-lu="Carousel">
    <li class="lu-selected">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ol>

Iheartweb

<!-- Fires a 'next' event -->
<button type="button" data-lu="Button:Next">Next</a>
<!-- Fires a 'custom' event -->
<button type="button" data-lu="Button" data-lu-config="{
    'Button': {
        'action': 'custom'
    }
}">Custom</button>
<!-- Fires a 'previous' event -->
<button type="button" data-lu="Button:Previous">Previous</button>

Iheartweb

<div data-lu="Carousel">
  <ol class="carousel">
    <li id="event_bubbling-one" class="one lu-selected">One</li>
    <li id="event_bubbling-two" class="two">Two</li>
    <li id="event_bubbling-three" class="three">Three</li>
  </ol>
  <button type="button" aria-controls="event_bubbling-one" data-lu="Button:Select">One</button>
  <button type="button" aria-controls="event_bubbling-two" data-lu="Button:Select">Two</button>
  <button type="button" aria-controls="event_bubbling-three" data-lu="Button:Select">Three</button>
</div>

Iheartweb

<ol id="whirly-woo" data-lu="Carousel" class="carousel" data-lu-config="{
    'Carousel': {
        observe: '#whirly-previous'
    }
}">
    <li class="one lu-selected">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
    <li class="four">Four</li>
    <li class="five">Five</li>

Iheartweb

<button role="button" aria-controls="foo" data-lu="Button:Select">Select Foo</button>
<a class="button" href="#baz" role="button" data-lu="Button:Select">Select Baz</a>
<button role="button" data-lu="Button:Select" data-lu-config="{
    'Button:Select': {
        item: '.bar'
    }
}">Select Bar</button>