0

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:

Slick Slider Example

halfer
  • 19,824
  • 17
  • 99
  • 186
H.Husain
  • 423
  • 1
  • 7
  • 28

1 Answers1

1

I have achieved this using the below code for both slider:

{this.props.items.celebrity.slice(0, Math.ceil(celebrity.length / 2)).map((item) => (
<a href="#"><img src={item.image_url} className="img-responsive" /></a>
))}

{this.props.items.celebrity.slice(celebrity.length / 2).map((item) => (
<a href="#"><img src={item.image_url} className="img-responsive" /></a>
))}
H.Husain
  • 423
  • 1
  • 7
  • 28