SO-39017687

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="carousel-inner" role="listbox">
  <ul class="controls"></ul>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu1.jpg);"> slide 1</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu2.jpg);"> slide 2 </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu3.jpg);"> slide 3 </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/clarivu8-1.jpg);"> slide 4 </div>
  <div class="item active" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu5.jpg);"> slide 5 </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2014/06/optegra7.jpg);"> slide 6 </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/ruth-ad.jpg);"> slide 7 </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu-guidelines.jpg);"> slide 8 </div>
  <div class="item video-slide">
    <video id="theVideo-83" controls="" preload="none" poster="">
      slide 9
      <source src="http://bootstrap.immaculate.co.uk/wp-content/uploads/making-of-edit4-final-HD.mp4">
    </video>
  </div>
</div>

<div class="carousel-inner" role="listbox">
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu1.jpg);"> slide 1</div>
  <div class="item"...

CSS

.slideNumber {
  display: inline-block;
  list-style-type: none;
  margin: 0.2em 0.5em;
  width: 2em;
  height: 2em;
  box-sizing: border-box;
}

.slideNumber a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-align: center;
  line-height: 2;
  border: 1px solid transparent;
  box-sixing: border-box;
}

a.slideLink {
  border-color: #0f0;
}

a.videoLink {
  border-color: #f00;
}

.slideNumber a::before {
  margin: 0 0.2em 0 0;
  margin: 0 0.2em 0 0;
}

.slideNumber a.activeLink {
  border-radius: 50%;
  box-shadow: 0 0 0.5em 0.1em limegreen;
}

JavaScript

(function($) {
  $.fn.goToSlide = function(opts) {
    var settings = $.extend({
        'activeLinkClass': 'activeLink',
        'activeSlideClass': 'active',
        'controlsIn': '#controls',
        'goToSlideClass': 'fa fa-file-powerpoint-o',
        'goToVideoClass': 'fa fa-file-video-o',
        'hasVideoClass': 'video-slide',
        'liClass': 'slideNumber',
        'showPageNumbers': true,
        'slideSelector': '.item'
      }, opts),
      li = $('<li />', {
        'class': settings.liClass
      }),
      a = $('<a />').on('click', function(e) {
        $(this.hash)
          .addClass(settings.activeSlideClass)
          .siblings()
          .removeClass(settings.activeSlideClass);
        $(this)
          .addClass(settings.activeLinkClass)
          .closest('li')
          .siblings()
          .children()
          .removeClass(settings.activeLinkClass);
      }),
      liClone,
      aClone,
      controls,
      slideWrap;

    return this.each(function(slideIndex, slideWrapper) {
      slideWrap = $(slideWrapper);
      controls = slideWrap.find(settings.controlsIn);

      if (controls.length) {
        controls = controls;
      } else {
        controls = $('<ul />').prependTo(slideWrapper);
      }

      slideWrap.find(settings.slideSelector).each(function(index, slide) {
        liClone = li.clone();
        aClone = a.clone(true)
          .attr('href', function() {
            slide.id = 'slide_' + slideIndex + '_' + index;

            return '#' + slide.id;
          })
          .text(settings.showPageNumbers === true ? index + 1 : '')
          .addClass(function() {
            return [slide.classList.contains(settings.hasVideoClass) ? settings.goToVideoClass : settings.goToSlideClass, slide.classList.contains(settings.activeSlideClass) ? settings.activeLinkClass : ''].join(' ');
          });
        liClone
          .append(aClone)
          .appendTo(controls);
      });
    });
 ...