bootstrap-slider.php
Quell Code
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/plugins/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<style>
.pager-active { border: 2px solid #5280DD; }
</style>
</head>
<body>
<div class="gallery-container">
<div id="gallery" class="gallery-images">
<img src="http://placehold.it/1280x480/ff726b/FFF&text=1" alt="" />
<img src="http://placehold.it/1280x480/334D5C/FFF&text=2" alt="" />
<img src="http://placehold.it/1280x480/2ecc71/FFF&text=3" alt="" />
<img src="http://placehold.it/1280x480/45B29D/FFF&text=4" alt="" />
<img src="http://placehold.it/1280x480/EFC94C/FFF&text=5" alt="" />
<img src="http://placehold.it/1280x480/EB6841/FFF&text=6" alt="" />
<img src="http://placehold.it/1280x480/3498DB/FFF&text=7" alt="" />
<img src="http://placehold.it/1280x480/8E44AD/FFF&text=8" alt="" />
<img src="http://placehold.it/1280x480/f39c12/FFF&text=9" alt="" />
<img src="http://placehold.it/1280x480/c0392b/FFF&text=10" alt="" />
<img src="http://placehold.it/1280x480/7f8c8d/FFF&text=11" alt="" />
<img src="http://placehold.it/1280x480/d35400/FFF&text=12" alt="" />
</div>
<div class="gallery-thumbs-container">
<ul id="gallery-thumbs" class="gallery-thumbs-list">
<li class="thumb-item">
<div class="thumb pager-active">
<a href="">
<img src="http://placehold.it/250&text=1" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=2" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=3" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=4" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=5" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=6" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=7" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=8" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=9" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=10" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=11" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://placehold.it/250&text=12" alt="" /></a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
$(function(){
if ($('#gallery-thumbs').length > 0) {
var thumb = $('#gallery-thumbs').find('.thumb');
var visibleThumbs = 5;
var gallerySlider = $('#gallery').bxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500,
auto: true,
onSlideAfter: function (currentSlideNumber) {
var currentSlideNumber = gallerySlider.getCurrentSlide();
thumb.removeClass('pager-active');
thumb.eq(currentSlideNumber).addClass('pager-active');
},
onSlideNext: function () {
var currentSlideNumber = gallerySlider.getCurrentSlide();
slideThumbs(currentSlideNumber, visibleThumbs);
},
onSlidePrev: function () {
var currentSlideNumber = gallerySlider.getCurrentSlide();
slideThumbs(currentSlideNumber, visibleThumbs);
}
});
thumb.click(function (e) {
gallerySlider.goToSlide($(this).closest('.thumb-item').index());
e.preventDefault();
});
var thumbsSlider = $('#gallery-thumbs').bxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: false,
minSlides: 5,
maxSlides: 2,
slideWidth: 360,
slideMargin: 10
});
function slideThumbs(currentSlideNumber, visibleThumbs) {
var m = Math.floor(currentSlideNumber / visibleThumbs);
var slideTo = m * visibleThumbs;
thumbsSlider.goToSlide(m);
}
$('#gallery-thumbs').find('.thumb').click(function () {
$('#gallery-thumbs').find('.thumb').removeClass('pager-active');
$(this).addClass('pager-active');
});
}
});
</script>
</body>
</html>
Comments (1)
Die Canvas Balken Uhr ist ja mal Fett