slide3_carousel
v0.2.1
Published
This package allow you to import slider with 3 cards including Image and title text with a sub title text. You can install the package using bellow mentioned command.
Downloads
5
Readme
Getting Started with slide3_carousel
This package allow you to import slider with 3 cards including Image and title text with a sub title text. You can install the package using bellow mentioned command.
npm i slide3_carousel
Important
Please install react boostrap using following command
npm install react-bootstrap bootstrap
then you have to import boostrap css file to the index.js file as bellow mentioned.
import 'bootstrap/dist/css/bootstrap.min.css';
Coding example
import Carousel from 'slide3_carousel'
function App() {
const data =[
{
"image": "https://media.istockphoto.com/photos/barber-using-scissors-and-comb-picture-id640274128?k=20&m=640274128&s=612x612&w=0&h=XuetWJSNoLnN7f1t0CjGqLVi_P7uxdvuLG5iOvs7yjc=",
"title": "Haircut",
"description": "Lorem ipsum dolor sit amet, conse adipiscing elit, sed do eiusmod tempor incididunt ut."
},
{
"image": "https://media.istockphoto.com/photos/cropped-shot-of-female-client-receiving-a-haircut-picture-id961867192?k=20&m=961867192&s=612x612&w=0&h=89JWTKGPFGql7058Du1Dg4y3OjF0tXhlN9H8hPj5y6k=",
"title": "Hair Styling",
"description": "Lorem ipsum dolor sit amet, conse adipiscing elit, sed do eiusmod tempor incididunt ut."
},
{
"image": "https://media.gettyimages.com/photos/young-woman-at-the-hairdressers-picture-id170173618?s=612x612",
"title": "Makeup",
"description": "Lorem ipsum dolor sit amet, conse adipiscing elit, sed do eiusmod tempor incididunt ut."
},
{
"image": "https://media.istockphoto.com/photos/business-woman-lady-boss-in-beauty-salon-making-hairdress-and-looking-picture-id1147811403?k=20&m=1147811403&s=612x612&w=0&h=lBbmmhPxES33OgnJgkzvtURRSs_gRvD7kX65gETQ9r8=",
"title": "Tatto",
"description": "Lorem ipsum dolor sit amet, conse adipiscing elit, sed do eiusmod tempor incididunt ut."
},
{
"image": "https://media.gettyimages.com/photos/young-woman-at-the-hairdressers-picture-id170173618?s=612x612",
"title": "Coloring",
"description": "Lorem ipsum dolor sit amet, conse adipiscing elit, sed do eiusmod tempor incididunt ut."
}
]
return (
<div >
<Carousel services={data}/>
</div>
);
}
export default App;