Monday, 28 December 2015

Integrate Twitter Bootstrap Slider using Angular Js

We have been working to integrate responsive slider in angular js. So we used the following bootstrap css and converted it into angular js.


Bootstrap Css Version : v3.0.0
Angular Js Version : v1.2.0-rc.3
Plugin Used for Slider : http://extremecss.com/demos/bs_carousel/


The plugin is simple slider using bootstrap classes
  • Below code shows the main image code for slider.


    We need to provide “active” class to the start image which is done using ng:class property

  • Below code shows the indicator code for slider.


  • We have added method setCurrentSlideIndex method to slide to the current slide inspite of using bootstrap’s data-to-slide property using carousel method which is shown below:


  • Below, methods shows the next and previous functionality of the slider.