Streaming live at 10am (PST)

Need help with Slider design


#1

Slider arrows keep popping in and out of existence. And at this point I have been messing around with one image slider for close to over an hour probably. First the right arrow disappears, then its back, then the left arrow disappears. Oh and the image formatting is wonky and showing parts of other images inside it. I’m obviously somewhat new to webflow but I consider myself intermediate to advanced in pretty much all things web and design related so this is kind of ridiculous that at $24 a month the slider doesn’t really seem to work out of the box. I do like webflow for its readable code and export but the GUI and bugginess seriously leaves something to be desired IMO.


Here is my site Read-Only: http://arborearth.webflow.io/carverponics
(how to share your site Read-Only link)


#2

Just to point out how ridiculous the GUI is, you literally have to click infinity times to go between style and navigator for example. yes there are hotkeys but you are still only ever served one slice at at time, which makes it harder than it should be to do stuff.


#3

Here is a new and interesting bug. There is a grey bar of deadspace in the image slider that appears while previewing it. Not when I clicked preview–it actually popped in while I was previewing the slider on its own.


#4

Yay. I adjusted the column padding and the grey bar disappeared. Oops one of the arrows disappeared again (mind you this is after I already deleted the first slider and started clean from scratch with all images the same exact resolution). I have been fighting with this image slider watching things pop in and out of existence without any input on my own (literally don’t press a single button and the formatting changes on its own), or the same exact input produces different results as well. So I am either retarded or this application is buggy AF. I dare someone to explain to me its the former. Oops the arrows popped back into existence. But there is this little grey bar that shows part of the next picture on the slide. I think this is as good as its going to get.


#5

Hi @Webflowater

I know it can get really frustrating to get things how you want on your first try with such a powerful tool. Can you please share a read-only link of your project? So that the community and I can take a look at your website and help you resolve this issue.

Here’s how to share your read-only link:


#6

Right now its just the grey bars for the image formatting. The slider arrows seem to be holding up. Thanks for your assistance. The sliders can be found via the pages tab “carverponics”
https://preview.webflow.com/preview/arborearth?utm_source=arborearth&preview=9d7d98243c950e6776c3eac26b993d87


#7

The easiest fix for the arrow problem is to move the pointer to the upper right hand corner of the screen, then disconnect your keyboard and smash it through the monitor.

If that doesn’t work, just double check your z-values. On a different note, From time to time, if I’ve changed an element way “too many” times it retains style attributes even after removing styles and even the class itself. Sometimes l just have to drag and drop a new div and give it the old class and viola. A replacement fixes it. It’s rare but a good tool to have. Also, sliders are sooooo 2016. There’s a good webinar on YouTube and Pixeldust walks you through making a slider from scratch in web


#8

Hey @Webflowater

This is how I like to do my sliders:

  1. Select the slider component and give it a width and height In this case I used48vw width and 27vw height on desktop with a max of 1280px width and 720px height.
  2. (optional) I changed the 2 columns into 1.
  3. Redo step one for each breakpoints (you can see what proprieties I set in the video).
  4. For all your slides, remove the image, and give them a background image set to cover.
    IMPORTANT: each slides need to have a different class name.

Hope that helps! :slight_smile:


#9

I dig Steps 1 and 2 and appreciate the time you took to make that video man. I know I was a little ranty so thats chill you still took the time to answer me. I do not really understand the why behind step 4 or step Important: but I will attempt to follow it since you clearly know what you are talking about.


#10

It does seem like between steps 1,2,3, u fixed my problem . thanks for the video again, super helpful (didn’t know you could slide by 10s which is a nice time saver)


#11

Glad I could help! :slight_smile: