부트 스트랩 js 개별 플러그인의 종속성을 찾는 방법은 무엇입니까?

Question

내 프로젝트에서 bootstrap.js를 제거하고 carousel.js 만 포함 시켰습니다. 그러나 컨베이어가 제대로 작동하지 않습니다. 내가 bootstrap.js docs을 읽었을 때, 그들은 개별 플러그인이 서로 의존한다고 제안했습니다 :

일부 플러그인과 CSS 구성 요소는 다른 플러그인에 의존합니다. 플러그인을 개별적으로 포함하는 경우 문서에서 이러한 종속성을 확인하십시오.

나는 모든 문서를 읽지 만 개별 플러그인의 종속성은 언급되어 있지 않으므로 내 질문에 어떻게 특정 bootstrap.js 플러그인의 모든 종속성을 찾을 수 있습니까?

Answer 1

jQuery는 부트 스트랩의 유일한 필수 종속성입니다. 문서가 참조하는 다른 종속 관계가 정상적으로 bootstrap.min.js의 일부하지만 빌드에 포함 (여부 포함) 할 수있다 - 여기 참조 : http://getbootstrap.com/customize/#plugins

경우에만 회전 목마 플러그인을 원하는 경우는, 플러그인에서 모든 확인란을 전환 섹션에서 '회전식 기능'을 선택하십시오. 그런 다음 덜 섹션의 모든 확인란을 선택 해제하고 '회전식 메뉴'를 선택하십시오. 화면 하단에서 '컴파일 및 다운로드'를 클릭하여 회전식 메뉴 만 포함하여 맞춤 빌드를 얻을 수 있습니다.

Answer 2

나는 내 질문에 downvotes 이해가 안되지만 내가 어떻게 appreaciate J.Titus와 크리슈나 나를 도우려고. carousel.js에 대한 jquery 이외의 종속성은 transition.js입니다. 나는 누군가가 각각의 부트 스트랩 js 플러그인에 대한 의존성 목록을 언급 할 수 있다면 나 자신을 알게되었다.

증명, transition.js

/* ======================================================================== 
 
* Bootstrap: carousel.js v3.3.7 
 
* http://getbootstrap.com/javascript/#carousel 
 
* ======================================================================== 
 
* Copyright 2011-2016 Twitter, Inc. 
 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
 
* ======================================================================== */ 
 

 

 
+function ($) { 
 
    'use strict'; 
 

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

 
    var Carousel = function (element, options) { 
 
    this.$element = $(element) 
 
    this.$indicators = this.$element.find('.carousel-indicators') 
 
    this.options  = options 
 
    this.paused  = null 
 
    this.sliding  = null 
 
    this.interval = null 
 
    this.$active  = null 
 
    this.$items  = null 
 

 
    this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this)) 
 

 
    this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element 
 
     .on('mouseenter.bs.carousel', $.proxy(this.pause, this)) 
 
     .on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) 
 
    } 
 

 
    Carousel.VERSION = '3.3.7' 
 

 
    Carousel.TRANSITION_DURATION = 600 
 

 
    Carousel.DEFAULTS = { 
 
    interval: 5000, 
 
    pause: 'hover', 
 
    wrap: true, 
 
    keyboard: true 
 
    } 
 

 
    Carousel.prototype.keydown = function (e) { 
 
    if (/input|textarea/i.test(e.target.tagName)) return 
 
    switch (e.which) { 
 
     case 37: this.prev(); break 
 
     case 39: this.next(); break 
 
     default: return 
 
    } 
 

 
    e.preventDefault() 
 
    } 
 

 
    Carousel.prototype.cycle = function (e) { 
 
    e || (this.paused = false) 
 

 
    this.interval && clearInterval(this.interval) 
 

 
    this.options.interval 
 
     && !this.paused 
 
     && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) 
 

 
    return this 
 
    } 
 

 
    Carousel.prototype.getItemIndex = function (item) { 
 
    this.$items = item.parent().children('.item') 
 
    return this.$items.index(item || this.$active) 
 
    } 
 

 
    Carousel.prototype.getItemForDirection = function (direction, active) { 
 
    var activeIndex = this.getItemIndex(active) 
 
    var willWrap = (direction == 'prev' && activeIndex === 0) 
 
       || (direction == 'next' && activeIndex == (this.$items.length - 1)) 
 
    if (willWrap && !this.options.wrap) return active 
 
    var delta = direction == 'prev' ? -1 : 1 
 
    var itemIndex = (activeIndex + delta) % this.$items.length 
 
    return this.$items.eq(itemIndex) 
 
    } 
 

 
    Carousel.prototype.to = function (pos) { 
 
    var that  = this 
 
    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active')) 
 

 
    if (pos > (this.$items.length - 1) || pos < 0) return 
 

 
    if (this.sliding)  return this.$element.one('slid.bs.carousel', function() { that.to(pos) }) // yes, "slid" 
 
    if (activeIndex == pos) return this.pause().cycle() 
 

 
    return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos)) 
 
    } 
 

 
    Carousel.prototype.pause = function (e) { 
 
    e || (this.paused = true) 
 

 
    if (this.$element.find('.next, .prev').length && $.support.transition) { 
 
     this.$element.trigger($.support.transition.end) 
 
     this.cycle(true) 
 
    } 
 

 
    this.interval = clearInterval(this.interval) 
 

 
    return this 
 
    } 
 

 
    Carousel.prototype.next = function() { 
 
    if (this.sliding) return 
 
    return this.slide('next') 
 
    } 
 

 
    Carousel.prototype.prev = function() { 
 
    if (this.sliding) return 
 
    return this.slide('prev') 
 
    } 
 

 
    Carousel.prototype.slide = function (type, next) { 
 
    var $active = this.$element.find('.item.active') 
 
    var $next  = next || this.getItemForDirection(type, $active) 
 
    var isCycling = this.interval 
 
    var direction = type == 'next' ? 'left' : 'right' 
 
    var that  = this 
 

 
    if ($next.hasClass('active')) return (this.sliding = false) 
 

 
    var relatedTarget = $next[0] 
 
    var slideEvent = $.Event('slide.bs.carousel', { 
 
     relatedTarget: relatedTarget, 
 
     direction: direction 
 
    }) 
 
    this.$element.trigger(slideEvent) 
 
    if (slideEvent.isDefaultPrevented()) return 
 

 
    this.sliding = true 
 

 
    isCycling && this.pause() 
 

 
    if (this.$indicators.length) { 
 
     this.$indicators.find('.active').removeClass('active') 
 
     var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)]) 
 
     $nextIndicator && $nextIndicator.addClass('active') 
 
    } 
 

 
    var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid" 
 
    if ($.support.transition && this.$element.hasClass('slide')) { 
 
     $next.addClass(type) 
 
     $next[0].offsetWidth // force reflow 
 
     $active.addClass(direction) 
 
     $next.addClass(direction) 
 
     $active 
 
     .one('bsTransitionEnd', function() { 
 
      $next.removeClass([type, direction].join(' ')).addClass('active') 
 
      $active.removeClass(['active', direction].join(' ')) 
 
      that.sliding = false 
 
      setTimeout(function() { 
 
      that.$element.trigger(slidEvent) 
 
      }, 0) 
 
     }) 
 
     .emulateTransitionEnd(Carousel.TRANSITION_DURATION) 
 
    } else { 
 
     $active.removeClass('active') 
 
     $next.addClass('active') 
 
     this.sliding = false 
 
     this.$element.trigger(slidEvent) 
 
    } 
 

 
    isCycling && this.cycle() 
 

 
    return this 
 
    } 
 

 

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

 
    function Plugin(option) { 
 
    return this.each(function() { 
 
     var $this = $(this) 
 
     var data = $this.data('bs.carousel') 
 
     var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option) 
 
     var action = typeof option == 'string' ? option : options.slide 
 

 
     if (!data) $this.data('bs.carousel', (data = new Carousel(this, options))) 
 
     if (typeof option == 'number') data.to(option) 
 
     else if (action) data[action]() 
 
     else if (options.interval) data.pause().cycle() 
 
    }) 
 
    } 
 

 
    var old = $.fn.carousel 
 

 
    $.fn.carousel    = Plugin 
 
    $.fn.carousel.Constructor = Carousel 
 

 

 
    // CAROUSEL NO CONFLICT 
 
    // ==================== 
 

 
    $.fn.carousel.noConflict = function() { 
 
    $.fn.carousel = old 
 
    return this 
 
    } 
 

 

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

 
    var clickHandler = function (e) { 
 
    var href 
 
    var $this = $(this) 
 
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 
 
    if (!$target.hasClass('carousel')) return 
 
    var options = $.extend({}, $target.data(), $this.data()) 
 
    var slideIndex = $this.attr('data-slide-to') 
 
    if (slideIndex) options.interval = false 
 

 
    Plugin.call($target, options) 
 

 
    if (slideIndex) { 
 
     $target.data('bs.carousel').to(slideIndex) 
 
    } 
 

 
    e.preventDefault() 
 
    } 
 

 
    $(document) 
 
    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler) 
 
    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler) 
 

 
    $(window).on('load', function() { 
 
    $('[data-ride="carousel"]').each(function() { 
 
     var $carousel = $(this) 
 
     Plugin.call($carousel, $carousel.data()) 
 
    }) 
 
    }) 
 

 
}(jQuery);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345"> 
 
     </div> 
 
    
 
     <div class="item"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345"> 
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div>

증명서없이 carousel.js, transition.js으로 carousel.js

/* ======================================================================== 
 
* Bootstrap: transition.js v3.3.7 
 
* http://getbootstrap.com/javascript/#transitions 
 
* ======================================================================== 
 
* Copyright 2011-2016 Twitter, Inc. 
 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
 
* ======================================================================== */ 
 

 

 
+function ($) { 
 
    'use strict'; 
 

 
    // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) 
 
    // ============================================================ 
 

 
    function transitionEnd() { 
 
    var el = document.createElement('bootstrap') 
 

 
    var transEndEventNames = { 
 
     WebkitTransition : 'webkitTransitionEnd', 
 
     MozTransition : 'transitionend', 
 
     OTransition  : 'oTransitionEnd otransitionend', 
 
     transition  : 'transitionend' 
 
    } 
 

 
    for (var name in transEndEventNames) { 
 
     if (el.style[name] !== undefined) { 
 
     return { end: transEndEventNames[name] } 
 
     } 
 
    } 
 

 
    return false // explicit for ie8 ( ._.) 
 
    } 
 

 
    // http://blog.alexmaccaw.com/css-transitions 
 
    $.fn.emulateTransitionEnd = function (duration) { 
 
    var called = false 
 
    var $el = this 
 
    $(this).one('bsTransitionEnd', function() { called = true }) 
 
    var callback = function() { if (!called) $($el).trigger($.support.transition.end) } 
 
    setTimeout(callback, duration) 
 
    return this 
 
    } 
 

 
    $(function() { 
 
    $.support.transition = transitionEnd() 
 

 
    if (!$.support.transition) return 
 

 
    $.event.special.bsTransitionEnd = { 
 
     bindType: $.support.transition.end, 
 
     delegateType: $.support.transition.end, 
 
     handle: function (e) { 
 
     if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) 
 
     } 
 
    } 
 
    }) 
 

 
}(jQuery); 
 

 

 

 
/* ======================================================================== 
 
* Bootstrap: carousel.js v3.3.7 
 
* http://getbootstrap.com/javascript/#carousel 
 
* ======================================================================== 
 
* Copyright 2011-2016 Twitter, Inc. 
 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
 
* ======================================================================== */ 
 

 

 
+function ($) { 
 
    'use strict'; 
 

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

 
    var Carousel = function (element, options) { 
 
    this.$element = $(element) 
 
    this.$indicators = this.$element.find('.carousel-indicators') 
 
    this.options  = options 
 
    this.paused  = null 
 
    this.sliding  = null 
 
    this.interval = null 
 
    this.$active  = null 
 
    this.$items  = null 
 

 
    this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this)) 
 

 
    this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element 
 
     .on('mouseenter.bs.carousel', $.proxy(this.pause, this)) 
 
     .on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) 
 
    } 
 

 
    Carousel.VERSION = '3.3.7' 
 

 
    Carousel.TRANSITION_DURATION = 600 
 

 
    Carousel.DEFAULTS = { 
 
    interval: 5000, 
 
    pause: 'hover', 
 
    wrap: true, 
 
    keyboard: true 
 
    } 
 

 
    Carousel.prototype.keydown = function (e) { 
 
    if (/input|textarea/i.test(e.target.tagName)) return 
 
    switch (e.which) { 
 
     case 37: this.prev(); break 
 
     case 39: this.next(); break 
 
     default: return 
 
    } 
 

 
    e.preventDefault() 
 
    } 
 

 
    Carousel.prototype.cycle = function (e) { 
 
    e || (this.paused = false) 
 

 
    this.interval && clearInterval(this.interval) 
 

 
    this.options.interval 
 
     && !this.paused 
 
     && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) 
 

 
    return this 
 
    } 
 

 
    Carousel.prototype.getItemIndex = function (item) { 
 
    this.$items = item.parent().children('.item') 
 
    return this.$items.index(item || this.$active) 
 
    } 
 

 
    Carousel.prototype.getItemForDirection = function (direction, active) { 
 
    var activeIndex = this.getItemIndex(active) 
 
    var willWrap = (direction == 'prev' && activeIndex === 0) 
 
       || (direction == 'next' && activeIndex == (this.$items.length - 1)) 
 
    if (willWrap && !this.options.wrap) return active 
 
    var delta = direction == 'prev' ? -1 : 1 
 
    var itemIndex = (activeIndex + delta) % this.$items.length 
 
    return this.$items.eq(itemIndex) 
 
    } 
 

 
    Carousel.prototype.to = function (pos) { 
 
    var that  = this 
 
    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active')) 
 

 
    if (pos > (this.$items.length - 1) || pos < 0) return 
 

 
    if (this.sliding)  return this.$element.one('slid.bs.carousel', function() { that.to(pos) }) // yes, "slid" 
 
    if (activeIndex == pos) return this.pause().cycle() 
 

 
    return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos)) 
 
    } 
 

 
    Carousel.prototype.pause = function (e) { 
 
    e || (this.paused = true) 
 

 
    if (this.$element.find('.next, .prev').length && $.support.transition) { 
 
     this.$element.trigger($.support.transition.end) 
 
     this.cycle(true) 
 
    } 
 

 
    this.interval = clearInterval(this.interval) 
 

 
    return this 
 
    } 
 

 
    Carousel.prototype.next = function() { 
 
    if (this.sliding) return 
 
    return this.slide('next') 
 
    } 
 

 
    Carousel.prototype.prev = function() { 
 
    if (this.sliding) return 
 
    return this.slide('prev') 
 
    } 
 

 
    Carousel.prototype.slide = function (type, next) { 
 
    var $active = this.$element.find('.item.active') 
 
    var $next  = next || this.getItemForDirection(type, $active) 
 
    var isCycling = this.interval 
 
    var direction = type == 'next' ? 'left' : 'right' 
 
    var that  = this 
 

 
    if ($next.hasClass('active')) return (this.sliding = false) 
 

 
    var relatedTarget = $next[0] 
 
    var slideEvent = $.Event('slide.bs.carousel', { 
 
     relatedTarget: relatedTarget, 
 
     direction: direction 
 
    }) 
 
    this.$element.trigger(slideEvent) 
 
    if (slideEvent.isDefaultPrevented()) return 
 

 
    this.sliding = true 
 

 
    isCycling && this.pause() 
 

 
    if (this.$indicators.length) { 
 
     this.$indicators.find('.active').removeClass('active') 
 
     var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)]) 
 
     $nextIndicator && $nextIndicator.addClass('active') 
 
    } 
 

 
    var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid" 
 
    if ($.support.transition && this.$element.hasClass('slide')) { 
 
     $next.addClass(type) 
 
     $next[0].offsetWidth // force reflow 
 
     $active.addClass(direction) 
 
     $next.addClass(direction) 
 
     $active 
 
     .one('bsTransitionEnd', function() { 
 
      $next.removeClass([type, direction].join(' ')).addClass('active') 
 
      $active.removeClass(['active', direction].join(' ')) 
 
      that.sliding = false 
 
      setTimeout(function() { 
 
      that.$element.trigger(slidEvent) 
 
      }, 0) 
 
     }) 
 
     .emulateTransitionEnd(Carousel.TRANSITION_DURATION) 
 
    } else { 
 
     $active.removeClass('active') 
 
     $next.addClass('active') 
 
     this.sliding = false 
 
     this.$element.trigger(slidEvent) 
 
    } 
 

 
    isCycling && this.cycle() 
 

 
    return this 
 
    } 
 

 

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

 
    function Plugin(option) { 
 
    return this.each(function() { 
 
     var $this = $(this) 
 
     var data = $this.data('bs.carousel') 
 
     var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option) 
 
     var action = typeof option == 'string' ? option : options.slide 
 

 
     if (!data) $this.data('bs.carousel', (data = new Carousel(this, options))) 
 
     if (typeof option == 'number') data.to(option) 
 
     else if (action) data[action]() 
 
     else if (options.interval) data.pause().cycle() 
 
    }) 
 
    } 
 

 
    var old = $.fn.carousel 
 

 
    $.fn.carousel    = Plugin 
 
    $.fn.carousel.Constructor = Carousel 
 

 

 
    // CAROUSEL NO CONFLICT 
 
    // ==================== 
 

 
    $.fn.carousel.noConflict = function() { 
 
    $.fn.carousel = old 
 
    return this 
 
    } 
 

 

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

 
    var clickHandler = function (e) { 
 
    var href 
 
    var $this = $(this) 
 
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 
 
    if (!$target.hasClass('carousel')) return 
 
    var options = $.extend({}, $target.data(), $this.data()) 
 
    var slideIndex = $this.attr('data-slide-to') 
 
    if (slideIndex) options.interval = false 
 

 
    Plugin.call($target, options) 
 

 
    if (slideIndex) { 
 
     $target.data('bs.carousel').to(slideIndex) 
 
    } 
 

 
    e.preventDefault() 
 
    } 
 

 
    $(document) 
 
    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler) 
 
    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler) 
 

 
    $(window).on('load', function() { 
 
    $('[data-ride="carousel"]').each(function() { 
 
     var $carousel = $(this) 
 
     Plugin.call($carousel, $carousel.data()) 
 
    }) 
 
    }) 
 

 
}(jQuery);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345"> 
 
     </div> 
 
    
 
     <div class="item"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345"> 
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div>