I would like to make 2 sliders with the same array loop, the array should be divided by 2 and 2 sliders will display. I am not sure how to do it.
Below is the current code :
Slider.js
import React, { Component } from 'react';
import Slider from "react-slick";
const slidersettings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4
};
class CelebSlider extends Component {
render() {
let celebArray = [];
let celebrity = this.props.items.celebrity
for (let key in celebrity) {
celebArray.push(celebrity[key]);
return (
<section>
<div className="row">
<div className="col-md-9">
<Slider {...slidersettings}>
{this.props.items.celebrity.map((item) => (
<div key={item.id} className="slider-item">
<a href="#"><img src={item.image_url} className="img-responsive"/></a>
<strong>{item.name}</strong>
</div>
))}
</Slider>
</div>
</div>
</section>
);
}
if (this.props.hasErrored) {
return <p>Sorry! There was an error loading the items</p>;
}
if (this.props.isLoading) {
return <p>Loading…</p>;
}
return (null);
}
}
Below is the illustration of what is needed: