Challenge #3: Embed a carousel of images into three modal windows

Requirements

  1. Use the construct of a modal window to display a carousel of images on the first three cards
  2. The carousel should show one image at a time, and present a minimum of three images in total.
  3. 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.
  4. Use only Bootstrap defaults to achieve your goals.
  5. Document your process as you go using the structure illustrated on this page.
  6. 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.

The attempt

...
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 somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

…

…

…

Process

  1. To start, I simply copyied the basic carousel code from the Bootstrap website and pasted it into the modal window code.
    • FAIL: So copy pasting it after the div of modal window code, it did not work.
  2. For my second try, I pasted the basic slide code right before the div of the modal window code ended. This was still a FAIL!
  3. I pasted the carousel code right after the modal body tag.
    • I added images from Lorem Picsum to the carousel code and three images showed up! The carousel works!
    • So, I DO have three images show up, however, they aren't randomizing like they're supposed to. All of the images in the three different carousels are the exact same just in a different order. What did I do wrong here?

Every page's content should end with a call to action that tells the user what to do next. A good call to action will have a link the user can click to go to the next resource we want them to see.