Does not display images, only arrows.

[Bus42]

I tried this package, but it will not display any slides. I imported the required CSS and created a CSS file with the extra CSS you said I needed and imported that file as well. My code is below.

import React from 'react';
import { Slide } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css';
import '../../theme/adWrapper.css';

const AdWrapper = () => {
    return (
      <Slide autoplay={false}>
      <div className="each-slide-effect">
        <div
          style={{
            backgroundImage: 'url(https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80)'
          }}
        >
          <span>
            Slide 1
          </span>
        </div>
      </div>
      <div className="each-slide-effect">
        <div
          style={{
            backgroundImage: 'url(https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80)'
          }}
        >
          <span>
            Slide 2
          </span>
        </div>
      </div>
      <div className="each-slide-effect">
        <div
          style={{
            backgroundImage: 'url(https://images.unsplash.com/photo-1444525873963-75d329ef9e1b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80)'
          }}
        >
          <span>
            Slide 3
          </span>
        </div>
      </div>
    </Slide>
    );
};

export default AdWrapper;

[Bus42]

I found the problem. You do not have a width assigned to the slideshow container. This causes the container to have zero width. This can be very frustrating for anyone trying out this slideshow package. May I suggest editing the .css or putting up a working block of code instead of snippets to make it easier to try out?

[femioladeji]

@Bus42 thanks for raising the issue. We'll update the README to be more helpful