MetroJS Simple Carousel with Pivots

by Laurie

HTML

<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
<link rel="stylesheet" href="http://www.drewgreenwell.com/content/metrojs.css">
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/d8aa6430e4/UntitledProject1/style.css">


<div class="red tile-group four-wide">
    
    <div id="pivot1" data-mode="carousel" data-start-now="true" data-direction="horizontal" data-repeat="0">

                           <!-- 1 -->
        <div class="live-tile" data-mode="static">
        <div  style="background-image:url('http://lorempixel.com/output/city-q-c-640-480-6.jpg');">
            <div class="tile-title">Tile Title</div>
        </div>
        </div>

        
        
                           <!-- 2 -->
        <div class="live-tile" data-mode="static">
        <div  style="background-image:url('http://lorempixel.com/output/city-q-c-640-480-5.jpg');">
            <div class="tile-title">Tile Title</div>
        </div>
        </div>
       
                              <!-- 3 -->
        <div class="live-tile" data-mode="static">
        <div  style="background-image:url('http://lorempixel.com/output/city-q-c-640-480-4.jpg');">
            <div class="tile-title">Tile Title</div>
        </div>
        </div>
        
        
        <!-- 4 --><div class="live-tile" data-mode="static">
        <div  style="background-image:url('http://lorempixel.com/output/city-q-c-640-480-3.jpg');">
            <div class="tile-title">Tile Title</div>
        </div>
        </div>
        
        
    </div>
    
    
    <div class="clear">
         <h2 class="item accentColor"><span class="icon-circle-full"></span></h2>

         <h2 class="item"><span class="icon-circle-full"></span></h2>

         <h2 class="item"><span class="icon-circle-full"></span></h2>

         <h2 class="item"><span class="icon-circle-full"></span></h2>

    </div>
    
</div>

CSS

.clear {
    clear:both;
    margin:0 auto;
}
h2.item {
    cursor:pointer;
    font-size:1em;
    line-height:1.4em;
    float:left;
    transition:all .2s ease;
    width:40px;
}
#pivot1 {
    position:relative;
    overflow:hidden;
    height:360px;
    width:480px;
    border:1px solid #ffffff;
}
#pivot1>.slide {
    display:block;
    height:100%;
    width:100%;
    position:absolute;
}
.tile-group {
    margin:40px auto 0px auto;
}
.tile-title {
    opacity: .7;
    filter: alpha(opacity=70);
    /* For IE8 and earlier */
    background-color:#333333;
    color:#ffffff;
    font-weight:bold;
    padding:3px 4px 3px 4px;
    font-size:1.18em;
    text-align:center;
}

JavaScript

// carousel mode: Pivot
// some options for the pivot
// the class that will symbolize the active pivot
var activeClass = 'accentColor';
// a placeholder for the active index
var currentIndex = 0;
// the default direction
var aniDirection = 'forward';
// change the animationDirection based on the index
var toggleDirection = false;
// setup the pivot content using a carousel tile
// im using animationComplete as a primitive queue for speedy clickers
$("#pivot1").liveTile({
    animationComplete: function (tileData, $front, $back) {
        var tmp, newIndex = tileData.currentIndex;
        if (newIndex != currentIndex) {
            tmp = currentIndex;
            currentIndex = newIndex;
            pivotSelected(tmp);
        } else {
            // do cool stuff with tiles and things!
        }
    }
});
// other tiles
$(".live-tile").not(".exclude").liveTile();

$("h2.item").click(function () {
    var newIndex = $(this).index();
    pivotSelected(newIndex);
});

function pivotSelected(newIndex) {
    if (newIndex == currentIndex) return;
    $("h2." + activeClass).removeClass(activeClass);
    $("h2.item").eq(newIndex).addClass(activeClass);
    if (toggleDirection) aniDirection = (newIndex > currentIndex) ? 'forward' : 'backward';
    currentIndex = newIndex;
    $("#pivot1").liveTile("goto", {
        index: currentIndex,
        animationDirection: aniDirection
    });
}