Another common UI element is a carousel of images to break up a landing page.
We'll use Bootstraps carousel class along with a handful of others to implement an auto-sliding carousel.
[00:00] Create a section with an ID of carousel. Next, create a div with a class of container as we don't want it to stretch the whole width of the screen like we did with the jumbotron, and add a top margin of 5. To turn this into a carousel, simply add the class of Carousel. [00:20] Make another div with a class of carousel dash enter. This will stop it from overlapping with the content below it as well as hold all of our images. Add a div with a class of carousel item. Inside of that, add an [00:40] image element. Duplicate this twice, but the first div must have an additional class of active. [01:01] For the images, add them from the images I've supplied in the carousel folder, and don't forget to add your alts. Now that we have some items in here, up in the container div, add data dashbsdashride equals carousel. This will auto start our [01:21] carousel. Also, give it a class of slide to smooth out that transition. There are tons of different options for transitions, and you can customize it yourself if you would like. I'll have you linked down in the description to the docs for more info. You can kind of see that we have some images that are sliding on their own. They're obviously too large, so let's [01:41] add in some styling for these images. Give each of the images a height of 400 and make the images span the width of the carousel using width dash 100. They need object dash fit dash cover so that they aren't stretched and rounded to round the corners. Also make sure to add rounded to the div with the [02:01] class of carousel inner. If we didn't add rounded to both, we would see the pointed image corners on each transition. We now have a fully functioning carousel with rotating beautiful images.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!