Animated slideShow not working well

HTML-CSS
1

I am trying to create a slideShow
the functionalty works but all the images are showing bellow each other instead of showing in one place.

slideshow
slideshow1890×904 85.9 KB

this is from a Reactjs plugin, but the functionality works fine but the design/layout doesnt.

html:

 <div className="slide-container">
        <Fade {...fadeProperties}>
        <div className="each-fade">
          <div className="image-container">
            <img src={fadeImages[0]} />
          </div>
          <h2>First Slide</h2>
        </div>
        <div className="each-fade">
          <div className="image-container">
            <img src={fadeImages[1]} />
          </div>
          <h2>Second Slide</h2>
        </div>
        <div className="each-fade">
          <div className="image-container">
            <img src={fadeImages[2]} />
          </div>
          <h2>Third Slide</h2>
        </div>
      </Fade>
      </div>

the 3 images:

    const fadeImages = [
        'http://127.0.0.1:8887/SlideShow/luxury-living-room-2.jpg',
        'http://127.0.0.1:8887/SlideShow/modern-chandeliers.jpg',
        'http://127.0.0.1:8887/SlideShow/modern-sofa-1.jpg'
      ];

css:

.slide-container {
  width: 70%;
  margin: auto; 

}

h3 {
  text-align: center; }

.each-slide > div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  height: 300px;
}

.each-slide span {
  padding: 20px;
  font-size: 20px;
  background: #efefef;
  text-align: center;
}

.each-fade {
  display: flex;
}

.each-fade .image-container {
  width: 75%;
  overflow: hidden;
}

.each-fade .image-container img {
  width: 50%;
  height: 300px;
}

.each-fade h2 {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #adceed;
}
2

Is it this library? Looking at the class names it looks like it might be.

The library comes with its own CSS, are you importing the CSS as needed?

3

yes it is a library

this is the link:

do you think this could be saved? or should i rather create my own slideshow evn though this would be allot of work

4

That is the same library I linked to.

So I ask again, did you import and use the CSS they provide?

import 'react-slideshow-image/dist/styles.css'

They also have an example site you can look at.
https://react-slideshow.herokuapp.com/

If you are importing the CSS and still need more help we really have to see a live example. You can use CodeSandbox.

5

I didnt see your link sorry,

Yes i have imported the CSS everything that i posted in my first post here is what i used.

I have also seen the other Link but it shows even less CSS And it didnt work for me either.
i have tried to use CodeSandbox but i dont know how to share the code.
but all the code i used is above so i hope that is enough

6

Looking at the picture you posted it really doesn’t look to me like the CSS is being applied. Just looking at the buttons you can tell something is wrong.

If you inspect the elements in the browser (Chrome docs) do you see the library styles being applied?

You just post the link from the browser address bar.

Here is a codesandbox with the fade example code from their site.

7

I see what the problem is :sweat_smile:
i did not include this line

import "react-slideshow-image/dist/styles.css";

man. that was so stupid…

but thank you very much it works now :slight_smile:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.