bootstrap-source/bootstrap-3.0.3/js/carousel.js
changeset 115 a9d04f5f5650
parent 54 0ded9d7748b7
equal deleted inserted replaced
114:6093dda9fe38 115:a9d04f5f5650
     1 /* ========================================================================
       
     2  * Bootstrap: carousel.js v3.0.3
       
     3  * http://getbootstrap.com/javascript/#carousel
       
     4  * ========================================================================
       
     5  * Copyright 2013 Twitter, Inc.
       
     6  *
       
     7  * Licensed under the Apache License, Version 2.0 (the "License");
       
     8  * you may not use this file except in compliance with the License.
       
     9  * You may obtain a copy of the License at
       
    10  *
       
    11  * http://www.apache.org/licenses/LICENSE-2.0
       
    12  *
       
    13  * Unless required by applicable law or agreed to in writing, software
       
    14  * distributed under the License is distributed on an "AS IS" BASIS,
       
    15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
       
    16  * See the License for the specific language governing permissions and
       
    17  * limitations under the License.
       
    18  * ======================================================================== */
       
    19 
       
    20 
       
    21 +function ($) { "use strict";
       
    22 
       
    23   // CAROUSEL CLASS DEFINITION
       
    24   // =========================
       
    25 
       
    26   var Carousel = function (element, options) {
       
    27     this.$element    = $(element)
       
    28     this.$indicators = this.$element.find('.carousel-indicators')
       
    29     this.options     = options
       
    30     this.paused      =
       
    31     this.sliding     =
       
    32     this.interval    =
       
    33     this.$active     =
       
    34     this.$items      = null
       
    35 
       
    36     this.options.pause == 'hover' && this.$element
       
    37       .on('mouseenter', $.proxy(this.pause, this))
       
    38       .on('mouseleave', $.proxy(this.cycle, this))
       
    39   }
       
    40 
       
    41   Carousel.DEFAULTS = {
       
    42     interval: 5000
       
    43   , pause: 'hover'
       
    44   , wrap: true
       
    45   }
       
    46 
       
    47   Carousel.prototype.cycle =  function (e) {
       
    48     e || (this.paused = false)
       
    49 
       
    50     this.interval && clearInterval(this.interval)
       
    51 
       
    52     this.options.interval
       
    53       && !this.paused
       
    54       && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
       
    55 
       
    56     return this
       
    57   }
       
    58 
       
    59   Carousel.prototype.getActiveIndex = function () {
       
    60     this.$active = this.$element.find('.item.active')
       
    61     this.$items  = this.$active.parent().children()
       
    62 
       
    63     return this.$items.index(this.$active)
       
    64   }
       
    65 
       
    66   Carousel.prototype.to = function (pos) {
       
    67     var that        = this
       
    68     var activeIndex = this.getActiveIndex()
       
    69 
       
    70     if (pos > (this.$items.length - 1) || pos < 0) return
       
    71 
       
    72     if (this.sliding)       return this.$element.one('slid.bs.carousel', function () { that.to(pos) })
       
    73     if (activeIndex == pos) return this.pause().cycle()
       
    74 
       
    75     return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
       
    76   }
       
    77 
       
    78   Carousel.prototype.pause = function (e) {
       
    79     e || (this.paused = true)
       
    80 
       
    81     if (this.$element.find('.next, .prev').length && $.support.transition.end) {
       
    82       this.$element.trigger($.support.transition.end)
       
    83       this.cycle(true)
       
    84     }
       
    85 
       
    86     this.interval = clearInterval(this.interval)
       
    87 
       
    88     return this
       
    89   }
       
    90 
       
    91   Carousel.prototype.next = function () {
       
    92     if (this.sliding) return
       
    93     return this.slide('next')
       
    94   }
       
    95 
       
    96   Carousel.prototype.prev = function () {
       
    97     if (this.sliding) return
       
    98     return this.slide('prev')
       
    99   }
       
   100 
       
   101   Carousel.prototype.slide = function (type, next) {
       
   102     var $active   = this.$element.find('.item.active')
       
   103     var $next     = next || $active[type]()
       
   104     var isCycling = this.interval
       
   105     var direction = type == 'next' ? 'left' : 'right'
       
   106     var fallback  = type == 'next' ? 'first' : 'last'
       
   107     var that      = this
       
   108 
       
   109     if (!$next.length) {
       
   110       if (!this.options.wrap) return
       
   111       $next = this.$element.find('.item')[fallback]()
       
   112     }
       
   113 
       
   114     this.sliding = true
       
   115 
       
   116     isCycling && this.pause()
       
   117 
       
   118     var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
       
   119 
       
   120     if ($next.hasClass('active')) return
       
   121 
       
   122     if (this.$indicators.length) {
       
   123       this.$indicators.find('.active').removeClass('active')
       
   124       this.$element.one('slid.bs.carousel', function () {
       
   125         var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
       
   126         $nextIndicator && $nextIndicator.addClass('active')
       
   127       })
       
   128     }
       
   129 
       
   130     if ($.support.transition && this.$element.hasClass('slide')) {
       
   131       this.$element.trigger(e)
       
   132       if (e.isDefaultPrevented()) return
       
   133       $next.addClass(type)
       
   134       $next[0].offsetWidth // force reflow
       
   135       $active.addClass(direction)
       
   136       $next.addClass(direction)
       
   137       $active
       
   138         .one($.support.transition.end, function () {
       
   139           $next.removeClass([type, direction].join(' ')).addClass('active')
       
   140           $active.removeClass(['active', direction].join(' '))
       
   141           that.sliding = false
       
   142           setTimeout(function () { that.$element.trigger('slid.bs.carousel') }, 0)
       
   143         })
       
   144         .emulateTransitionEnd(600)
       
   145     } else {
       
   146       this.$element.trigger(e)
       
   147       if (e.isDefaultPrevented()) return
       
   148       $active.removeClass('active')
       
   149       $next.addClass('active')
       
   150       this.sliding = false
       
   151       this.$element.trigger('slid.bs.carousel')
       
   152     }
       
   153 
       
   154     isCycling && this.cycle()
       
   155 
       
   156     return this
       
   157   }
       
   158 
       
   159 
       
   160   // CAROUSEL PLUGIN DEFINITION
       
   161   // ==========================
       
   162 
       
   163   var old = $.fn.carousel
       
   164 
       
   165   $.fn.carousel = function (option) {
       
   166     return this.each(function () {
       
   167       var $this   = $(this)
       
   168       var data    = $this.data('bs.carousel')
       
   169       var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
       
   170       var action  = typeof option == 'string' ? option : options.slide
       
   171 
       
   172       if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
       
   173       if (typeof option == 'number') data.to(option)
       
   174       else if (action) data[action]()
       
   175       else if (options.interval) data.pause().cycle()
       
   176     })
       
   177   }
       
   178 
       
   179   $.fn.carousel.Constructor = Carousel
       
   180 
       
   181 
       
   182   // CAROUSEL NO CONFLICT
       
   183   // ====================
       
   184 
       
   185   $.fn.carousel.noConflict = function () {
       
   186     $.fn.carousel = old
       
   187     return this
       
   188   }
       
   189 
       
   190 
       
   191   // CAROUSEL DATA-API
       
   192   // =================
       
   193 
       
   194   $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
       
   195     var $this   = $(this), href
       
   196     var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
       
   197     var options = $.extend({}, $target.data(), $this.data())
       
   198     var slideIndex = $this.attr('data-slide-to')
       
   199     if (slideIndex) options.interval = false
       
   200 
       
   201     $target.carousel(options)
       
   202 
       
   203     if (slideIndex = $this.attr('data-slide-to')) {
       
   204       $target.data('bs.carousel').to(slideIndex)
       
   205     }
       
   206 
       
   207     e.preventDefault()
       
   208   })
       
   209 
       
   210   $(window).on('load', function () {
       
   211     $('[data-ride="carousel"]').each(function () {
       
   212       var $carousel = $(this)
       
   213       $carousel.carousel($carousel.data())
       
   214     })
       
   215   })
       
   216 
       
   217 }(jQuery);
       
Impressum Datenschutzerklärung