Join Ray Villalobos for an in-depth discussion in this video Automating carousel indicators, part of Bootstrap Layouts: Responsive Single-Page Design.
- One of my pet peeves is having a human…do something that a computer can do a lot better…and that's the case when you build carousels…with a feature called indicators.…So at the bottom of a lot of carousels,…you'll see something like this that allows you…to slide to the different carousels directly,…to create those in Bootstrap you have to create…an ordered list with a class of carousel indicators…and then put in a list item for every element…in your carousel, so there's three elements here,…you should have three different items inside your carousel,…right now this example really only has one,…but you should have three of them…and if you add or delete photos,…you need to remember to update this section.…
That sounds like something that a computer can do…a lot better, so I'm gonna grab…this piece of code right here, I'm only gonna need…the ordered list and I'm gonna find the carousel,…put it somewhere in this section,…I'll put it at the very top and I'm gonna delete…the list items and just have this ordered list…
Author
Released
2/5/2015- Analyzing your markup
- Creating simple column layouts
- Creating basic navigation and a simple carousel
- Modifying Bootstrap styles
- Working with branding and toggle styles
- Adding interactivity
Skill Level Beginner
Duration
Views
Related Courses
-
Bootstrap 3: Advanced Web Development
with Ray Villalobos3h 28m Intermediate -
Learning Sublime Text 2
with Kevin Yank1h 40m Beginner
-
Introduction
-
Welcome1m
-
What you should know1m 6s
-
Exercise files58s
-
-
1. Understanding Bootstrap Layouts
-
What we'll build3m 19s
-
Using rows and columns7m 26s
-
Finishing our simple layout6m 18s
-
Building a footer layout5m 23s
-
Adding a basic carousel7m 54s
-
-
2. Customizing Bootstrap Styles
-
Overcoming injection issues4m 25s
-
Styling single-page designs9m 42s
-
Tackling a multilevel layout6m 21s
-
Fixing our footer5m 18s
-
3. Adding Interactivity
-
Smoothing our page scroll2m 36s
-
Randomizing our carousels9m 40s
-
Conclusion
-
Next steps2m 50s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Automating carousel indicators