JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.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"
},
interval: 1000,
initialize: function() {
// this is like a constructor
var _this = this;
},
next: function() {
// retrieve image URLs
var srcs = [ 'http://lorempixel.com/150/100/city', 'http://lorempixel.com/150/100/sports' ];
this.$('.images img').each(function(i, img) {
img.src = srcs[i];
});
}
});
var view = new MySuperView();
view.setElement(document.getElementById("slideshow"));