Join Ray Villalobos for an in-depth discussion in this video Randomizing our carousels, part of Bootstrap Layouts: Responsive Single-Page Design.
- Because they're animated,…I think carousels are a great way…to get the user's attention.…However, I don't always like…to show them in the same order,…so let's modify our code…so that the carousel loads a random photo…when the page loads.…Now to do that, I'm going to add a new variable up here,…it's gonna be called randSlide,…and I'm going to set it to a random number.…So we would use the Math.random function,…and normally that would give us a number…between zero and one.…
If we multiply it times another number,…in this case we're going to use slidyqty,…it's gonna give us a number…between zero and the slide quantity,…which is what we want, however,…because normally Math.random does a number…between zero and one,…it means that we're gonna get a decimal number,…so we need to make sure that when we multiply that,…we don't get any sort of decimal around that.…And, we can use the Math.floor method…to go ahead and just get a solid full number…without any decimal point.…
So now we're gonna need…to take a featured item,…and go ahead and add this active class to it.…
- 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
Bootstrap 3: Advanced Web Developmentwith Ray Villalobos3h 28m Intermediate
Up and Running with Sublime Text 2with Kevin Yank1h 40m Beginner
1. Understanding Bootstrap Layouts
2. Customizing Bootstrap Styles
3. Adding Interactivity
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.Cancel
Take 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.