MovingBoxes

MovingBoxes playground

HTML

<link rel="stylesheet" href="http://css-tricks.github.com/MovingBoxes/css/movingboxes.css">
<script src="http://css-tricks.github.com/MovingBoxes/js/jquery.movingboxes.js"></script>
<!--[if lt IE 9]>
<link  type="text/css"  href="http://css-tricks.github.com/MovingBoxes/css/movingboxes-ie.css"  rel="stylesheet" media="screen" />
<![endif]-->

<ul id="slider">
    
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/1.jpg" alt="picture" />
        <h2>Olivia News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
    </li>
    
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/2.jpg" alt="picture" />
        <h2>Alice News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
    </li>
    
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/3.jpg" alt="picture" />
        <h2>Yin News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
    </li>
    
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/4.jpg" alt="picture" />
        <h2>Gerri News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
    </li>
    
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/5.jpg" alt="picture" />
        <h2>Tabitha News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
    </li>
    
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/6.jpg" alt="picture" />
        <h2>Mary News Heading</h2>
        <p>A very short exerpt goes here... <a href="#">more</a></p>
    </li>
    
    <li>
        <img...

CSS

#slider {
    width: 300px;
}
#slider li {
    width: 150px;
}

JavaScript

$('#slider').movingBoxes({
    startPanel: 4,
    wrap: true,
    buildNav: true,
    navFormatter: function(index, panel) {
        return "&#9679;";
    }
});

/* Add Swipe to Moving Boxes */
var maxTime = 1000,
    // allow movement if < 1000 ms (1 sec)
    maxDistance = 50,
    // swipe movement of 50 pixels triggers the swipe

    target = $('#slider'),
    api = target.data('movingBoxes'),
    startX = 0,
    startTime = 0,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';

api.$wrap.on(startEvent, function(e) {
    // prevent image drag (Firefox)
    e.preventDefault();
    startTime = e.timeStamp;
    startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).on(endEvent, function(e) {
    startTime = 0;
    startX = 0;
}).on(moveEvent, function(e) {
    e.preventDefault();
    var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement < 1 sec
        currentTime = e.timeStamp;
    if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
        if (currentX < startX) {
            // swipe left code here
            api.goForward();
        }
        if (currentX > startX) {
            // swipe right code here
            api.goBack();
        }
        startTime = 0;
        startX = 0;
    }
});