(SOPT) bxSlider

http://pt.stackoverflow.com/questions/21826/plugin-bxslider-n%C3%A3o-mostra-miniatura

by brasofilo

HTML

<script src="https://cdn.rawgit.com/stevenwanderski/bxslider-4/master/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/stevenwanderski/bxslider-4/master/jquery.bxslider.css">
<h3 class="fiddle-header"><a href="http://pt.stackoverflow.com/q/21826/201">SOPT 21826 : bxSlider com Pager dinâmico</a></h3>

<div class="bxslider">
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar1" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar2" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar3" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar4" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar5" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar6" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar7" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar8" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar9" />
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar10" />
    </div>
</div>

CSS

.bx-pager-item {
    margin: 5px
}
.bx-wrapper .bx-pager {
    bottom: -70px;
}
.fiddle-header {
    background-color: #ccc;
    margin:0 0 50px 0;
    text-align: center;
    color: #fff;
    font-family: sans-serif;
}
.fiddle-header a {
    text-decoration: none;
    color: #eee
}
.fiddle-header a:hover {
    text-decoration: underline;
}

JavaScript

$('.bxslider').bxSlider({
    slideWidth: 300,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 3,
    slideMargin: 10,
    pager: true,
    pagerType: 'full',
    buildPager: function (slideIndex) {
        var img_pager = 'http://dummyimage.com/50x50/aaa/fff&text=' + (slideIndex + 1);
        return '<img class="img-pager" src="' + img_pager + '" />';
    }
});