JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<div id="slideshow">
  <ul class="images">
    <li><img src="http://lorempixel.com/150/100/abstract" /><li>
    <li><img src="http://lorempixel.com/150/100/food" /><li>
  </ul>

  <a class="next" href="#">Next</a>
</div>

JavaScript

var MySuperView = Backbone.View.extend({
    events: {
        "click .next": "next"
    },

    next: function () {

        var index = 1;

        var img = $("<img />");

        $('.images').on('loaded', function () {
            // change the following line with
            // var url = 'http://yourUrl/' + index++ + '.png';
            var url = 'http://lorempixel.com/150/100/city/' + index++ + '/';
            img = $("<img />").attr('src', url);

            img.load(function () {    
                $('.images').append(img);
                $('.images').trigger('loaded');
            });
        });

        $('.images').trigger('loaded');
    }
});

var view = new MySuperView();
view.setElement(document.getElementById("slideshow"));