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>
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
$('.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
});
}
});