Slider issue copy or adding extra slides

I am trying to create a multi column slider. I succeeded in the first slide but when I try to copy the slide or add extra slides the background image and overlying flex div is not visible. What am I doing wrong here?

Thx for your help!
Daniel


http://https://preview.webflow.com/preview/blue-office-battery?preview=f057c7c6c517f0ff59309a20b492184c

1 Like

Hi @daniel_volle_maan

In order for Webflow components to work properly, they have default display settings which when changed break the design of the component. So, since you have changed the display setting of the slide element in the Slider component, the slider is broken. That is why you cannot duplicate your slide.

To fix this, use a div inside the slider as I show in this video:
https://cl.ly/2R083C272m1A/Screen%20Recording%202017-05-26%20at%2005.59%20PM.mov

​Hope this is helpful.

Thx for the video @AnnaKelian! I tried to recreate it. I got the image to change now but now for some reason the blue overlay is not being shown! Could you please have another look and see what I’m doing wrong here?

Thx so much!
Daniel

Hi @daniel_volle_maan

You still have the flex settings on the slides. You need to remove those and use divs.

  • Add a div inside of each slide
  • Give this div the same class as the slide
  • Remove the class from the slide
  • Move the content of the slide inside of the new div
  • Make sure to add height:100% to slide 4 and slide 5.
  • Add display flex to slide 5

Also remove slide 5 from the slider. And make sure the background image of slide 5 is set correctly.

​Hope this is helpful.

Thx so much @AnnaKelian…Started from scratch and got it right done :slight_smile:

Have a nice day!
Daniel

1 Like

You are most welcome Daniel!

Good luck with your project!

All the best,
Anna

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