Challenge #3: Embed a carousel of images into three modal windows.
Requirements
- 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, Acknowledged.
Card One
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Two
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Three
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Four
Some quick example text to build on the card title and make up the bulk of the card's content.
The Process?
- This process started out with the same base as the 1st and 2nd sandbox challenges where the code was successful. The task here is to make the images cycle through a carousel for each individual card.
- I nested the new code into an individual card from the official Bootstrap website to figure out how to develop a carousel effect. Carousel work! But the sizing and grid format broke.
- That issue was resolved by enclosing the elements in a row div and adjusting the size of the images.
- Another issue appears, the individual cards do not cycle images. Somehow, only the first card's images are cycling. What does the code show?
- I realize that there are ID's within the code, which means that each carousel must be linked to the one that needs to cycle.
- After changing the ID's for each individual carousel, it appears that they cycle succussfully and the modal pop-ups work as well.
- It all worked!
Go back to the beginning page.