< >

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>

Add Comment

* Required information
1000
Powered by Commentics

Comments (1)

Gravatar
Admin
Sascha65says...

Die Canvas Balken Uhr ist ja mal Fett