A Carousel Plugin

Basic Custom styles Animations Thumbs Adaptive Laza load Methods Callbacks
Download

terseBanner jQuery Plugin


<style>
    .banner{width: 960px;height: 540px;}
</style>
<div class="banner">
    <ul>
        <li><img src="img/banner-1.jpg"></li>
        <li><img src="img/banner-2.jpg"></li>
        <li><img src="img/banner-3.jpg"></li>
        <li><img src="img/banner-4.jpg"></li>
        <li><img src="img/banner-5.jpg"></li>
        <li><img src="img/banner-6.jpg"></li>
    </ul>
</div>

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.terseBanner.min.js"></script>

<script>
    $('.banner').terseBanner();
</script>

Custom styles


.custom .tb-arrow a{
    width: 64px;
    height: 64px;
    margin: 0 20px;
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}
/* ... */

.custom .tb-btn{
    bottom: 0;
    height: 10px;
}
.custom .tb-btn a{
    width: 160px;
    margin: 0;
    box-sizing: border-box;
    background: #666;
    border-right: 1px solid #fff;
    border-radius: 0;
}
/* ... */

Animations:

fade
  • slide
  • fade
  • flash
  • none

Thumbnails navigation


$('#thumbnail').terseBanner({
    btn: false,
    thumb: {
        width: 150,
        height: 84,
        gap: 4,
        visible: 3
    }
});

For Each Slide:


<div class="banner" id="thumbnail">
    <ul>
        <li><img src="img/banner-1.jpg?thumb=img/thumb-1.jpg"></li>
        <li><img src="img/banner-2.jpg?thumb=img/thumb-2.jpg"></li>
        <li><img src="img/banner-3.jpg?thumb=img/thumb-3.jpg"></li>
        <!-- ... -->
    </ul>
</div>

Adaptive

Change Width: → ← ← →
Fullscreen Demo

Lazy Loading

Reload 

<div class="banner" id="lazyload">
    <ul>
        <li><img data-src="img/banner-1.jpg"></li>
        <li><img data-src="img/banner-2.jpg"></li>
        <li><img data-src="img/banner-3.jpg"></li>
        <!-- ... -->
    </ul>
</div>

Methods

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

$('.switch .btn .prev').click(function() {
    $('#switch').terseBanner('prev');
});

$('.switch .btn .next').click(function() {
    $('#switch').terseBanner('next');
});

$('.switch .btn ul li').click(function() {
    $('#switch').terseBanner(parseInt($(this).text()));
});

Callbacks


$('#callback').terseBanner({
    arrow: true,
    init: function ($banner, $item) {
        $item.each(function(i) {
            $(this).append('<em>' + (i + 1) +'</e>>');
        });
    },
    before: function ($banner, $item, currentIndex) {
        $item.eq(currentIndex).find('em').css({
            top: -120,
            opacity: 0
        });
    },
    after: function ($banner, $item, currentIndex) {
        $item.eq(currentIndex).find('em').css({
            top: 210,
            opacity: 1
        });
    }
});