bootstrap-carousel.js 4.81 KB
Newer Older
Jacob Thornton's avatar
Jacob Thornton committed
1
/* ==========================================================
Jacob Thornton's avatar
Jacob Thornton committed
2
 * bootstrap-carousel.js v2.0.2
Jacob Thornton's avatar
Jacob Thornton committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 * http://twitter.github.com/bootstrap/javascript.html#carousel
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */


21
22
23
!function ($) {

  "use strict"; // jshint ;_;
Jacob Thornton's avatar
Jacob Thornton committed
24
25
26
27
28
29
30


 /* CAROUSEL CLASS DEFINITION
  * ========================= */

  var Carousel = function (element, options) {
    this.$element = $(element)
31
    this.options = options
Jacob Thornton's avatar
Jacob Thornton committed
32
    this.options.slide && this.slide(this.options.slide)
33
34
35
    this.options.pause == 'hover' && this.$element
      .on('mouseenter', $.proxy(this.pause, this))
      .on('mouseleave', $.proxy(this.cycle, this))
Jacob Thornton's avatar
Jacob Thornton committed
36
37
38
39
40
  }

  Carousel.prototype = {

    cycle: function () {
41
42
      this.options.interval
        && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
Jacob Thornton's avatar
Jacob Thornton committed
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
      return this
    }

  , to: function (pos) {
      var $active = this.$element.find('.active')
        , children = $active.parent().children()
        , activePos = children.index($active)
        , that = this

      if (pos > (children.length - 1) || pos < 0) return

      if (this.sliding) {
        return this.$element.one('slid', function () {
          that.to(pos)
        })
      }

      if (activePos == pos) {
        return this.pause().cycle()
      }

      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
    }

  , pause: function () {
      clearInterval(this.interval)
69
      this.interval = null
Jacob Thornton's avatar
Jacob Thornton committed
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
      return this
    }

  , next: function () {
      if (this.sliding) return
      return this.slide('next')
    }

  , prev: function () {
      if (this.sliding) return
      return this.slide('prev')
    }

  , slide: function (type, next) {
      var $active = this.$element.find('.active')
        , $next = next || $active[type]()
        , isCycling = this.interval
        , direction = type == 'next' ? 'left' : 'right'
        , fallback  = type == 'next' ? 'first' : 'last'
        , that = this
90
        , e = $.Event('slide')
Jacob Thornton's avatar
Jacob Thornton committed
91
92
93
94
95
96
97

      this.sliding = true

      isCycling && this.pause()

      $next = $next.length ? $next : this.$element.find('.item')[fallback]()

Jacob Thornton's avatar
remake    
Jacob Thornton committed
98
99
      if ($next.hasClass('active')) return

100
      if ($.support.transition && this.$element.hasClass('slide')) {
101
102
        this.$element.trigger(e)
        if (e.isDefaultPrevented()) return
Jacob Thornton's avatar
Jacob Thornton committed
103
104
105
106
107
108
109
110
111
112
        $next.addClass(type)
        $next[0].offsetWidth // force reflow
        $active.addClass(direction)
        $next.addClass(direction)
        this.$element.one($.support.transition.end, function () {
          $next.removeClass([type, direction].join(' ')).addClass('active')
          $active.removeClass(['active', direction].join(' '))
          that.sliding = false
          setTimeout(function () { that.$element.trigger('slid') }, 0)
        })
113
      } else {
114
115
        this.$element.trigger(e)
        if (e.isDefaultPrevented()) return
116
117
118
119
        $active.removeClass('active')
        $next.addClass('active')
        this.sliding = false
        this.$element.trigger('slid')
Jacob Thornton's avatar
Jacob Thornton committed
120
121
122
123
124
125
126
127
128
129
130
131
132
      }

      isCycling && this.cycle()

      return this
    }

  }


 /* CAROUSEL PLUGIN DEFINITION
  * ========================== */

133
  $.fn.carousel = function (option) {
Jacob Thornton's avatar
Jacob Thornton committed
134
135
136
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('carousel')
137
        , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
Jacob Thornton's avatar
Jacob Thornton committed
138
139
140
      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
      if (typeof option == 'number') data.to(option)
      else if (typeof option == 'string' || (option = options.slide)) data[option]()
141
      else if (options.interval) data.cycle()
Jacob Thornton's avatar
Jacob Thornton committed
142
143
144
145
146
    })
  }

  $.fn.carousel.defaults = {
    interval: 5000
147
  , pause: 'hover'
Jacob Thornton's avatar
Jacob Thornton committed
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
  }

  $.fn.carousel.Constructor = Carousel


 /* CAROUSEL DATA-API
  * ================= */

  $(function () {
    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
      var $this = $(this), href
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
      $target.carousel(options)
      e.preventDefault()
    })
  })

166
}(window.jQuery);