Challenge #3:
Embed a carousel of images into three modal windows.
- Use the construct of a modal window to display a carousel of images on the first three cards
- The carousel should show one image at a time, and present a minimum of three images in total.
- You may use images from lorem picsum as placeholders. Consider using images of varied dimensions to see what happens when your content varies in size.
- Use only Bootstrap defaults to achieve your goals.
- Document your process as you go using the structure illustrated on this page.
- When you break something, try to fix it. If it is broken beyond repair, save the file as a fail and move on to a fresh attempt.
Challenge: Accepted ✓
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereHow The War Was Won...
(the process)
- After locating the correct Bootstrap code for carousels, I was able to add the carousel code into the bodies of each modal I had created. Success!
- With my code in place, I started to fill out the attributes that needed to be customized, including adding images that would appear in the carousel. I made sure to use different images for each to make sure that I was seeing the correct, unique carousels. Victory!
- I broke my carousels... all of my modals were showing the same carousel. Failure :(
- My other two carousels weren't showing up, and I realized that once again there were identifiers that needed to be customized in order for the code to understand that I wanted them to show up in different places. I went through and gave each carousel a unique identifing name (ex: the first carousel was named "carousel1"). This successfully made my code understand which carousels were supposed to appear in each modal. Success!
Hurray! All three Bootstrap challenges have been completed! Feel free to return back to my index.