We are almost finishing our plugin. Now, it's time to add some methods to be called in the plugin, just like you can call .carousel('pause') on Bootstrap Carousel for instance.

When we were creating the plugin base, we created a class Plugin, which is the definition of the plugin. This part of the code is pretty common across the plugins and it is used on every native Bootstrap plugin:

function Plugin(option) {

  var args = arguments;
  [].shift.apply(args);

  return this.each(function () {
    var $this = $(this),
        data  = $this.data('bootstrap-carousel'),
        options = $.extend({}, BootstrapCarousel.DEFAULTS, $this.data(), typeof option == 'object' && option),
        value;

    if (!data) {
      $this.data('bootstrap-carousel', (data = new BootstrapCarousel(this, options)));
    }

    if (typeof option == 'string') {
      if (data[option] instanceof Function) {
        value = data[option].apply(data, args);
      } else {
        value = data.options[option];
      }
    }
  })
}

If you take a look at the highlighted lines of code, here we check the option variable that is passed. If it is a string, we apply the function, calling the option function on the plugin.

After that, we need to expose the function of the BootstrapCarousel class definition. So let's add two options, one to reload the plugin and another to add a slide to the carousel:

var BootstrapCarousel   = function (element, options) {
  this.$element = $(element);
  this.options = $.extend({}, BootstrapCarousel.DEFAULTS, options);

  // Expose public methods
  this.addSlide = BootstrapCarousel.prototype.addSlide;
  this.reload = BootstrapCarousel.prototype.load;

  this.init();
}

The highlighted lines represent the exposed methods. Now we need to implement them on the prototype.

Although one of the methods has already been implemented, the BootstrapCarousel.prototype.load when exposing it we renamed the expose from load to reload. Calling this method will erase all the Bootstrap Carousel original plugin, create the template again based on the images passed through our plugin, and generate the plugin again.

We need to implement the method BootstrapCarousel.prototype.addSlide. So, inside Bootstrap.prototype, create the following function:

addSlide: function(itemImg, itemTitle, itemContent) {
  var newSlide = this.template.slide
    .replace(/{itemImg}/, itemImg)
    .replace(/{itemTitle}/, itemTitle)
    .replace(/{itemContent}/, itemContent);
  this.$element.append(newSlide);
  this.load();
},

This function will receive itemImg, which is the source of an image; itemTitle, for the slide title caption; and itemContent for the paragraph on the caption as well.

To create a new slide, we first use the template for a new one that can be found in the template variable this.template.slide:

template: {
      slide: '<img class="hide" src="{itemImg}" data-title="{itemTitle}" data-content="{itemContent}">',
… // others template variable
}

Like creating the slide deck, indicators, and controls, we set a multiple keys identified around curly brackets and do a replace of them in the function.

After the replacements, the new slide is appended to this.$element, which also contains the others slides. Finally, we need to call the load function, which will do all the hard work to assign variables, hide elements, and start the original plugin.

Then, when you want to add a slide to the plugin, you just need to call:

$('.bootstrap-carousel').bCarousel('addSlide', 'imgs/jon.png', 'New title image', 'This is awesome!');

With this plugin function, we are done! See, it is not too difficult to create a new plugin. We can now start incrementing it with more options for automation and customization.