Movatterモバイル変換

Here’s a carousel with slides. Note the appearance of the.d-block also,.w-100 on carousel images to override browser default image alignment.

Adding in the previous and next controls. We recommend using <button> elements, but you can also use <a> elements withrole="button".

You can attach the indicators to the carousel, lengthwise the controls, too.

You can add captions to slides with the.carousel-caption element within any.carousel-item. They can be immediately hidden on smaller viewports, as shown below, with optionaldisplay utilities. We hide them with.d-none and draw them back on medium-sized devices with.d-md-block.

Add.carousel-fade to your carousel to animate slides with a fade transition instead of a slide.

Add.carousel-dark to the.carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with thefilter CSS property. Captions and controls have additional Sass variables that customize thecolor andbackground-color.