How To Do Backbone Image Slider

I am learning backbone and am not aware much in backbone.I need to do image slider using backbone.Though I can do using jquery like this The link is the demo as per my requirement.

Solution 1:

What you are looking for are Backbone Views.

I personally really like the TodoMVC example, which is complete introduction to Backbone and its different components.

What you will need to do is to first wrap your content into a identifiable div, something like:

<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>

Note that:

1. I only use an ID for the wrapper, not inside of it. It's preferable since backbone views have nice mechanism to work only with its own content (look at events and selector).
2. I wrap images inside a <ul>. Again, only in the purpose of making the structure more meaningful and querying easier.

Then, your view code should look like:

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

  initialize: function() {
    // this is like a constructor
    var _this = this;
    setTimeout(function() {
      _this.next(); // calling next() every `interval` ms
    }, _this.interval);
  },

  next: function() {
    // here goes your logic
    return false;
  }
});

And finally, to bind the view to the matching element:

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

And voilà :)