AnythingSlider playground

Add, remove, adjust any or all options so you can see how it works.

by Mottie

HTML

<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/swfobject.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.fx.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<base href="http://css-tricks.github.com/AnythingSlider/">
<div id="wrap">
    <ul id="slider">
        <li><img src="demos/images/slide-civil-1.jpg" data-thumb="demos/images/slide-civil-1.jpg" alt="" /></li>
        <li><img src="demos/images/slide-env-1.jpg" data-thumb="demos/images/slide-env-1.jpg" /></li>
        <li><img src="demos/images/slide-civil-2.jpg" data-thumb="demos/images/slide-civil-2.jpg" /></li>
        <li><img src="demos/images/slide-env-2.jpg" data-thumb="demos/images/slide-env-2.jpg" /></li>
    </ul>
</div>
<!-- Add stylesheets here -->
<link rel="stylesheet" href="css/theme-metallic.css">

CSS

ul#slider {
    width: 680px;
    height: 317px;
    list-style: none;
}
/*
  Adjust the left and right position to be about the same size as the
  outer wrapper padding (.anythingslider-metallic)
*/
.prev-thumb, .next-thumb {
    display: none;
    position: absolute;
    width: 140px;
    height: 70px;
    left: 25px; /* adjust this as needed */
    background: #0355a3;
    top: 50%;
    margin-top: -35px;
}
.next-thumb {
    left: auto;
    right: 25px; /* adjust this as needed */
}
.prev-thumb img, .next-thumb img {
    width: 100px;
    height: 60px;
    margin: 5px;
}
.prev-thumb img {
    float: right;
}
.back:hover ~ .prev-thumb, .forward:hover ~ .next-thumb, .prev-thumb:hover, .next-thumb:hover {
    display: inline;
}

JavaScript

$(function () {
    function updateThumbs(slider) {
        var prv = slider.targetPage - 1 < 0 ? slider.panels : slider.targetPage - 1,
            nxt = slider.targetPage + 1 > slider.panels - 1 ? 0 : slider.targetPage + 1;
        $('.prev-thumb img').attr('src', slider.$items.eq(prv).find('img[data-thumb]').attr('data-thumb'));
        $('.next-thumb img').attr('src', slider.$items.eq(nxt).find('img[data-thumb]').attr('data-thumb'));
    };

    /* use slide_complete instead of slide_begin if you want the thumbs to change
       after the animation has completed, but the updating then won't match the 
       default navigation styling
    */
    $('#slider').on('initialized slide_begin', function(e, slider){
        if (!slider.$wrapper.find('.prev-thumb').length) {
            slider.$wrapper.append('<div class="prev-thumb"><img/></div><div class="next-thumb"><img/></div>');
        }
        updateThumbs(slider);
    });
    
    /* initialize the slider */
    $('#slider').anythingSlider({
        theme: 'metallic'
    });

});