Is there a way to display cards in a slider format? I want the carousel to show the next card on each click.
I tried importing Bootstrap into my project but it doesn't seem to be functioning as expected.
Here's the link to the tutorial I am using for creating cards and sliders: tutorial
You can view the entire code here
Sdata.jsx
const Sdata =[
{
imgsrc: work2,
title: "Android Application",
href: "https://mybestdjangoblog.herokuapp.com/",
},
{
imgsrc: work3,
title: "Android Application",
href: "https://mybestdjangoblog.herokuapp.com/",
}
];
Card.jsx
function Card(props){
return(
<>
<img className="card-img-top"
src={props.imgsrc} alt="" />
<div className="card-body">
<h4 className="card-title">{props.title}</h4>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a href={props.href} className="btn btn-primary" target="_blank">View Project</a>
</div>
</>
);
};
Work.jsx
const Work =() =>{
return(
<>
<div id="multi-item-example" className="carousel slide carousel-multi-item" data-ride="carousel">
<div className="controls-top">
<a className="btn-floating" href="#multi-item-example" data-slide="prev"><i className="fas fa-chevron-left"></i></a>
<a className="btn-floating" href="#multi-item-example" data-slide="next"><i
className="fas fa-chevron-right"></i></a>
</div>
<ol className="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" className="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
</ol>
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
<div className="col-md-3" style={{ float: "left"}}>
<div className="card mb-2">
<img className="card-img-top"
src={work1} alt="" />
<div className="card-body">
<h4 className="card-title">Android Application</h4>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a href="https://mybestdjangoblog.herokuapp.com/" className="btn btn-primary" target="_blank">View Project</a>
</div>
<div className="carousel-item">
<div className="col-md-3" style={{float:"left"}}>
<div className="card mb-2">
{Sdata.map((val, ind) => {
return(
<Card key={ind} imgsrc={val.imgsrc} title={val.title} href={val.href}/>
)})}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>