Carousel

Slides Only
<Carousel id="carouselExampleSlidesOnly1" 
className="carousel slide" data-bs-ride="carousel" indicators={false}>                                   
<Carousel.Item className="active">
    <img src={media26} className="d-block w-100" alt="..."/>
</Carousel.Item>
<Carousel.Item>
    <img src={media27} className="d-block w-100" alt="..."/>
</Carousel.Item>
<Carousel.Item>
    <img src={media33} className="d-block w-100" alt="..."/>
</Carousel.Item>
</Carousel>
With controls
<Carousel id="carouselExampleControls"
className="carousel slide" data-bs-ride="carousel" indicators={false}>
     <Carousel.Item  className="active">
         <img src={media28} className="d-block w-100" alt="..."/>
     </Carousel.Item>
     <Carousel.Item >
         <img src={media31} className="d-block w-100" alt="..."/>
     </Carousel.Item>
     <Carousel.Item >
         <img src={media32} className="d-block w-100" alt="..."/>
     </Carousel.Item>
</Carousel>
With indicators
<Carousel id="carouselExampleIndicators"
 className="carousel slide" data-bs-ride="carousel">
    <Carousel.Item className="active">
        <img src={media25} className="d-block w-100" alt="..."/>
    </Carousel.Item>
    <Carousel.Item>
        <img src={media29} className="d-block w-100" alt="..."/>
    </Carousel.Item>
    <Carousel.Item>
        <img src={media30} className="d-block w-100" alt="..."/>
    </Carousel.Item>
</Carousel>
With captions
<Carousel  id="carouselExampleCaptions"
className="carousel slide" data-bs-ride="carousel">
<Carousel.Item className="active">
    <img src={media59} className="d-block w-100" alt="..."/>
    <Carousel.Caption className="d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
    </Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
    <img src={media60} className="d-block w-100" alt="..."/>
    <Carousel.Caption className="d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
    </Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
    <img src={media61} className="d-block w-100" alt="..."/>
    <Carousel.Caption className="d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
    </Carousel.Caption>
</Carousel.Item>
</Carousel>
Crossfade
...
...
...
<Carousel fade id="carouselExampleFade" 
className="carousel slide carousel-fade" indicators={false} >
    <Carousel.Item className="active">
        <img src={media43} className="d-block w-100" alt="..."/>
    </Carousel.Item>
    <Carousel.Item>
        <img src={media44} className="d-block w-100" alt="..."/>
    </Carousel.Item>
    <Carousel.Item>
        <img src={media45} className="d-block w-100" alt="..."/>
    </Carousel.Item>
</Carousel>
Individual .carousel-item interval
<Carousel id="carouselExampleInterval" 
className="carousel slide" data-bs-ride="carousel" indicators={false}>
     <Carousel.Item interval={1000} className="active" >
         <img src={media40} className="d-block w-100" alt="..."/>
     </Carousel.Item>
     <Carousel.Item interval={2000}>
         <img src={media41} className="d-block w-100" alt="..."/>
     </Carousel.Item>
     <Carousel.Item >
         <img src={media42} className="d-block w-100" alt="..."/>
     </Carousel.Item>
 </Carousel>
Disable touch swiping
 <Carousel touch={false} id="carouselExampleControlsNoTouching"
className="carousel slide" data-bs-touch="false" indicators={false}
data-bs-interval="false">
    <Carousel.Item className="active">
        <img src={media13} className="d-block w-100" alt="..."/>
    </Carousel.Item>
    <Carousel.Item>
        <img src={media14} className="d-block w-100" alt="..."/>
    </Carousel.Item>
    <Carousel.Item>
        <img src={media18} className="d-block w-100" alt="..."/>
    </Carousel.Item>
</Carousel>
Dark variant
<Carousel id="carouselExampleDark" className="carousel slide">
     <Carousel.Item className="active" data-bs-interval="10000">
         <img src={media63} className="d-block w-100"
             alt="..."/>
         <Carousel.Caption className="d-none d-md-block">
             <h5>First slide label</h5>
<p className="op-7">Some representative placeholder content 
for the first slide.</p>
         </Carousel.Caption>
     </Carousel.Item>
     <Carousel.Item data-bs-interval="2000">
         <img src={media64} className="d-block w-100"
             alt="..."/>
         <Carousel.Caption className="d-none d-md-block">
             <h5>Second slide label</h5>
 <p className="op-7">Some representative placeholder content
  for the second slide.</p>
         </Carousel.Caption>
     </Carousel.Item>
     <Carousel.Item>
         <img src={media62} className="d-block w-100"
             alt="..."/>
         <Carousel.Caption className="d-none d-md-block">
             <h5>Third slide label</h5>
<p className="op-7">Some representative placeholder content 
for the third slide.</p>
         </Carousel.Caption>
     </Carousel.Item>
 </Carousel>