slide3_carousel

0.2.1 • Public • Published

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;

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.2.10latest

Version History

VersionDownloads (Last 7 Days)Published
0.2.10
0.2.00
0.1.90
0.1.80
0.1.70
0.1.60
0.1.50
0.1.40
0.1.30
0.1.20
0.1.10

Package Sidebar

Install

npm i slide3_carousel

Weekly Downloads

0

Version

0.2.1

License

none

Unpacked Size

11 kB

Total Files

6

Last publish

Collaborators

  • kalpa.c