Integrate Twitter Bootstrap Slider using Angular Js

Posted by on January 13, 2014 10:35

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.
$Description: d:\Production\ITW_CorpSite\Portals\0\Blog\BootstrapAngularSlider1.png$

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.
$Description: d:\Production\ITW_CorpSite\Portals\0\Blog\BootstrapAngularSlider2.png$
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:
$Description: d:\Production\ITW_CorpSite\Portals\0\Blog\BootstrapAngularSlider3.png$
Below, methods shows the next and previous functionality of the slider.
$Description: d:\Production\ITW_CorpSite\Portals\0\Blog\BootstrapAngularSlider4.png$

Words from our clients

"Toshal Infotech helped me launch my MVP in 4 weeks. Got my first paying customers before writing a line of backend code. Total game changer."

— Ankit Shah, SaaS Founder
"Toshal Infotech turned my idea into a working MVP in just 30 days. Their AI-powered solutions helped us validate the market fast and scale confidently. Truly impressive execution."

— Priya Mehta, Startup Co-Founder
"Partnering with Toshal Infotech was the smartest move we made. Our MVP went live in under a month, and we started getting real user feedback instantly. Phenomenal team, top-notch delivery."

— James Müller, SaaS Founder
"I couldn't believe how quickly we went from concept to product. In 4 weeks, we had a live MVP, a clean UI, and customer signups rolling in. Toshal Infotech knows startups."

— Rahul Verma, Tech Entrepreneur
"Launching a market-ready MVP in 30 days sounded too good to be true—until Toshal Infotech made it happen. No fluff, just results. Highly recommend for early-stage founders."

— Sarah Thompson, Product Strategist

Tell Us About Your Project

contact me

We’ve done lot’s of work, Let’s Check some from here

View All Projects

Do You Have Any Project?

We are ready to take your project to the next level. Don’t hesitate to contact us. Our awesome and creative team will bring you the best solution.

Send Project Details

Toshal Infotech

Our company has been developing high-quality and reliable software for corporate needs since 2008. We are renowned professionals of software development.

Integrate Twitter Bootstrap Slider using Angular Js

Words from our clients

Tell Us About Your Project

We’ve done lot’s of work, Let’s Check some from here

Do You Have Any Project?

We are ready to take your project to the next level. Don’t hesitate to contact us. Our awesome and creative team will bring you the best solution.

Menu

What We Offer

Our contacts

Surat

Pune