AnythingSlider playground

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

by jrweinb

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://proloser.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/swfobject.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<div id="externalNav">
    
            <a href="#1"><img src="http://www.pixeltr.ee/clients/equifunk/v1/images/youtube_thumb1.jpg" width="103px" height="72px"></a>
            <a href="#2"><img src="http://www.pixeltr.ee/clients/equifunk/v1/images/youtube_thumb2.jpg" width="102px" height="72px"></a>
            <a href="#3"><img src="http://www.pixeltr.ee/clients/equifunk/v1/images/youtube_thumb3.jpg" width="103px" height="72px"></a>
            <a href="#4"><img src="http://www.pixeltr.ee/clients/equifunk/v1/images/youtube_thumb4.jpg" width="102px" height="72px"></a>
            <a href="#5"><img src="http://www.pixeltr.ee/clients/equifunk/v1/images/youtube_thumb5.jpg" width="103px" height="72px"></a>
    

</div>

<br><br>

<ul id="slider">
    
        <li class="panel1"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/1gOyrAVZHi4" frameborder="0" allowfullscreen></iframe></li>
                                    <!-- YouTube: iframe -->
                                    <li class="panel2"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/vfno_6idEkg" frameborder="0" allowfullscreen></iframe></li>
                                    <!-- YouTube: iframe -->
                                    <li class="panel3"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/yArVjVHV8Xw" frameborder="0" allowfullscreen></iframe></li>
                                    <!-- YouTube:...

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}

JavaScript

$('#slider').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    resizeContents      : true,
    addWmodeToObject    : 'transparent',
    buildArrows: false,
    buildStartStop: false
});

           
// set up external links
$('#externalNav a').click(function(){
    var slide = $(this).attr('href').substring(1);
    $('#slider').anythingSlider(slide);
    return false;
});