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]-->


<h2 class="message">&larr; shrink this window &rarr;</h2>
<br><br>

<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...

CSS

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

@media all and (max-width: 350px) {
    .movingBoxes a.mb-scrollButtons,
    .movingBoxes .mb-left-shadow,
    .movingBoxes .mb-right-shadow,
    .movingBoxes .mb-controls {
        display: none;
    }
    .movingBoxes.mb-wrapper, .movingBoxes #slider {
        width: auto;
        border: 0;
        box-shadow: 0 0 0;
    }
    .movingBoxes .mb-scroll, .movingBoxes #slider {
        height: auto !important;
        overflow: visible;
    }
    .movingBoxes #slider {
        width: 150px !important;
        position: static !important;
        padding: 0 !important;
    }
    .movingBoxes #slider li {
        float: none;
        cursor: default;
        padding: 10px;
        /* match #slider li width seen above */
        width: 150px !important;
        font-size: 1em !important;
    }
}

.message { 
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
}

JavaScript

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