Reputation: 329
I want to display 3 items of slide/carousel per one slide. For example, I have six objects in array. I am using React and React Slick.
// data
const dataslide = [
{
"id": "1",
"title": "One"
},
{
"id": "2",
"title": "Two"
},
{
"id": "3",
"title": "Three"
},
{
"id": "4",
"title": "Four"
},
{
"id": "5",
"title": "Five"
},
{
"id": "6",
"title": "Six"
}
]
I know that my settings in below component are valid and work fine, but that is not what I want. I also know that I did wrong iteration. Please take a look into <li>
wrapper that has two <div>
side by side. I want to display one item in the left side and two items in another slide. Any idea?
// React component
class App extends Component {
render() {
let settings = {
draggable: false,
slideToShow: 1,
autoplay: false,
dots: true,
lazyLoad: 'ondemand',
arrows: true,
}
return (
<ul>
<Slider {...settings}>
{
dataslide.map((item, i) => {
return (
<li key={i}>
// left side
<div className="left">
<div className="item">{item.title}</div>
</div>
// right side
<div className="right">
<div className="item">{item.title}</div>
<div className="item">{item.title}</div>
</div>
</li>
)
})
}
</Slider>
</ul>
)
}
}
Upvotes: 1
Views: 6226
Reputation: 73
Change slideToShow to the number of slides you want to be showned at once.
Upvotes: 1