xxxxxxxxxx
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
xxxxxxxxxx
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
xxxxxxxxxx
Carousels allow multiple pieces of content to occupy a single,
coveted space. This may placate corporate infighting,
but on large or small viewports, people often scroll past carousels.
A static hero or integrating content in the UI may be better solutions.
xxxxxxxxxx
import { Carousel } from 'react-carousel-minimal';
function App() {
const data = [
{
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/1200px-GoldenGateBridge-001.jpg",
caption: "San Francisco"
},
{
image: "https://cdn.britannica.com/s:800x450,c:crop/35/204435-138-2F2B745A/Time-lapse-hyper-lapse-Isle-Skye-Scotland.jpg",
caption: "Scotland"
},
{
image: "https://static2.tripoto.com/media/filter/tst/img/735873/TripDocument/1537686560_1537686557954.jpg",
caption: "Darjeeling"
},
{
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Palace_of_Fine_Arts_%2816794p%29.jpg/1200px-Palace_of_Fine_Arts_%2816794p%29.jpg",
caption: "San Francisco"
},
{
image: "https://i.natgeofe.com/n/f7732389-a045-402c-bf39-cb4eda39e786/scotland_travel_4x3.jpg",
caption: "Scotland"
},
{
image: "https://www.tusktravel.com/blog/wp-content/uploads/2020/07/Best-Time-to-Visit-Darjeeling-for-Honeymoon.jpg",
caption: "Darjeeling"
},
{
image: "https://www.omm.com/~/media/images/site/locations/san_francisco_780x520px.ashx",
caption: "San Francisco"
},
{
image: "https://images.ctfassets.net/bth3mlrehms2/6Ypj2Qd3m3jQk6ygmpsNAM/61d2f8cb9f939beed918971b9bc59bcd/Scotland.jpg?w=750&h=422&fl=progressive&q=50&fm=jpg",
caption: "Scotland"
},
{
image: "https://www.oyorooms.com/travel-guide/wp-content/uploads/2019/02/summer-7.jpg",
caption: "Darjeeling"
}
];
const captionStyle = {
fontSize: '2em',
fontWeight: 'bold',
}
const slideNumberStyle = {
fontSize: '20px',
fontWeight: 'bold',
}
return (
<div className="App">
<div style={{ textAlign: "center" }}>
<h2>React Carousel Minimal</h2>
<p>Easy to use, responsive and customizable carousel component for React Projects.</p>
<div style={{
padding: "0 20px"
}}>
<Carousel
data={data}
time={2000}
width="850px"
height="500px"
captionStyle={captionStyle}
radius="10px"
slideNumber={true}
slideNumberStyle={slideNumberStyle}
captionPosition="bottom"
automatic={true}
dots={true}
pauseIconColor="white"
pauseIconSize="40px"
slideBackgroundColor="darkgrey"
slideImageFit="cover"
thumbnails={true}
thumbnailWidth="100px"
style={{
textAlign: "center",
maxWidth: "850px",
maxHeight: "500px",
margin: "40px auto",
}}
/>
</div>
</div>
</div>
);
}
export default App;
xxxxxxxxxx
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
xxxxxxxxxx
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5></h5>
<p></p>
</div>
</div>