Here is an example with a detailed explanation:

The outermost <div> is as follows:

• For carousel controls to WORK properly, they must have an id (in this case, id="myCarousel").
• This <div> has the class="carousel" to indicate that it contains a carousel.
• When a new item is displayed, the .slide class adds a CSS transition and animation effect that causes the objects to slide. If you don't want this effect, leave this class out.
• When the page loads, the data-ride= "carousel" attribute TELLS BOOTSTRAP to start animating the carousel right away.

The section on "Indicators" is as follows:

• Each slide's indicators are the small dots at the bottom (which indicates how many slides there are in the carousel, and which slide the user is currently viewing).
• With the class .carousel-indications, the indicators are supplied in an ordered list.
• The data-target attribute refers to the carousel's id.
• When a user clicks on a given dot, the data-slide-to attribute defines the slide they should GO to.

The "Wrapper" section is as follows:

• A div with the class .carousel-inner specifies the slides.
• Each slide's content is defined by a div with the class .item. This can be in the form of text or visuals.
• One of the slides must have the .active class APPLIED to it. The carousel will not be viewable otherwise.
• To generate a caption for each slide, a <div class="carousel-caption"> is added within each <div class="item">.

The section on "Left and Right Controls" is as follows:

• This code adds "left" and "right" buttons, allowing the user to manually navigate between slides.
• The data-slide attribute takes the keywords "prev" or "next," which change the position of the slide in relation to its current location.