The slider doesn't display and work properly on first display

Hi

First of all, check my live demo https://ui.mofect.com/moblog the top slider doesn’t display properly, I have set slidesPerView to 2, but it only displays 1 and can’t be scrolled. But when I resize the window size, it works like a charm.

I have read this similar issue https://github.com/kidjp85/react-id-swiper/issues/185 but no solution for me. Here are my codes:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Swiper from 'react-id-swiper';
import SliderItem from '../../components/slider-dom';
import { Pagination } from 'swiper/dist/js/swiper.esm'

/* SlideShow */
class Slider extends Component{

  constructor(props){
    super(props);
    this.state = {
       data: [],
    }
  }

  componentDidMount() {
     this.loadSlider();
  }

  loadSlider = () => {
     const { data } = this.state;

     const url = `https://xxxxxxxxxxx/`;
     fetch(url)
       .then((response) => {
          return response.json()
        })
       .then(json => {
         this.setState({
           data: json,
         });
         
       })
       .catch(function() {
     });
  };

  loop = () => {
    let loop = [];

    this.state.data.length > 0 && this.state.data.map((slide, i) => {

          loop.push(
            <SliderItem 
              key={ i } 
              id={ slide.id }
              postType={ slide.post_type }
              postID={ slide.post_id }
              pageID={ slide.page_id }
              productID={ slide.product_id }
              title={ slide.title }
              image={ slide.image }
              description={ slide.description }
            />
         );
    });
    return loop;
  }

  render() {
    const params = {
      slidesPerView: 2,
      loop: true,
      spaceBetween: 10,
      modules: [Pagination],
      shouldSwiperUpdate: true,
      rebuildOnUpdate: true,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      }
    }

    return(
      <div className="mo-slider">
          { this.state.data &&
            <Swiper { ...params} >
              { this.loop() }
            </Swiper>
          }
      </div>
    );
  }
}

export default Slider;

Anything I missed?

[kalideir]

For anyone that is still searching for the solution, just make sure the length of the array of items is bigger than 0, here is how it is solved in one of the issues:https://github.com/kidjp85/react-id-swiper/issues/185

[kidjp85]

I think here is the issue

 return(
      <div className="mo-slider">
          { this.state.data &&
            <Swiper { ...params} >
              { this.loop() }
            </Swiper>
          }
      </div>
    );

You should set the condition to this.state.data.length > 1