

Rest of the thing is self-explanatory, for example, the. The data-bs-slide attribute on carousel controls ( line no-23,26) accepts the keywords prev or next, which alters the slide position relative to its current position.carousel-item element that can be text and images. carousel-inner ( line no-10) and the content of each slide is defined within the.

The data-bs-slide-to attribute ( line no-4,5,6) move the slide position to a particular item (index beginning with 0) when clicking on the specific carousel indicator.carousel element tells the Bootstrap to start animating the carousel immediately when the page load. The data-bs-ride="carousel" attribute of the.carousel element) requires a unique id (in our case id="m圜arousel") so that it can be targeted by the carousel indicators ( line no-4,5,6) and carousel controls ( line no-23,26) to function properly. The outermost container of every carousel (i.e.The Bootstrap carousel generally has three components - carousel indicators ( small rectangles), carousel controls ( previous and next arrows) and the carousel items or slides. Well, let's go through each part of this carousel example code one by one for a better understanding. You might be wondering what this code was all about. Some placeholder content for the third slide. Some placeholder content for the second slide. Some placeholder content for the first slide. The output of the above example will look something like this:
