Slider Behavior When Displaying Multiple Slides at the Same Time

I have set the width of slides in my Slider setting to be 1/3 of the total width of the Mask. By design the Slider shows three slides simultaneously. Great!

However when I try to scroll to left to see additional slides, The Slider jumps three slides and shows slides 4-6.

I thought the behavior should be as such that the Slider scrolls one slide and not 3 slides.
e.g. while the Slider shows slides 1-3 on the screen, one scroll to the left I expect to see slides 2-4 (and not slides 4-6).

Another thing is that if the Slider shows an incomplete slide (overflow slide on the right side), the same slide should be shown again after the scroll and not jumped over.

Currently that’s intended behavior. This works great for things like products, testimonials, images, etc. Depending on what the context of your slider is, it may be beneficial to have it the way you’re thinking - like a photo thumbnail gallery.

Maybe @danro can add an option for this kind of behavior.

I haven’t seen this happen. Can you show an example?

Thanks @thesergie for the response.

The way it is working now is pretty much the same behavior as if I divided up the Mask width Slide into three equal sized columns. I imagine it would have been more consistent with the definition of the left and right arrows scroll one slide to the left or right.

Regarding the second part, you may set the Slider width to 40%.

Completely possible if you class the mask and change it’s overflow to visible. The only oddity is looping on the slides will show a blank momentarily on both the beginning and end. You can build a simple interaction for the screened back overlay and make it fade out when the slide appears and transition back to default on exit. I think that is about it. I will look back and see if I still have an example. I created one a week or two ago.

Hello,

So this means that it’s not possible to slide one slide at the time if the slides have a width of 1/3 of the mask?

And also, If a hace 13 slides, ando show 5 at the same time (slide width 1/5 of mask), i see 1 - 5 slides, then 6 - 10, then 11 - 13, but I have 2 free spaces. It’s not possible al least to slides 1 and 2 to reapper after the last one?

Thank you

duplicate them and add them to the end?

Would love to be able to have them slide one-at-a-time rather than a complete new set on each click. It’s very disruptive to have them all switch at once.

I believe this could be done if the content is always a consistent width (1/3 for example). You can modify the slider mask and the slider navigation independently. The slider will be indexing one slide, but the mask would reveal 3x (300% wide) and to the viewer appear to be 3x wide with the navigation set to fit the 3x span. If you use percentages everything should remain fully responsive. I have not tried this exact scenario yet, but am fairly certain it will give you that behavior. If you are careful you should be able to set the parts to index one and display any number just by modifying the percentage on the mask and the sliders width in a container or parent div. It would be super handy for media queries so the span could change on devices. Probably a good feature request as this could be easily driven by a variable as it is all driven by modifying styles, percentage widths and alignment.

The slider is super flexible allowing you to accomplish a bunch of things formatting wise. I would encourage you to take some time and class, tweak and modify its sub components to see how it works.

bonus points for making it disruptive @dubblethink, that is what is hot right now. :slight_smile: I am going to add a bunch of 404’s to my page - the pinnacle of disruptive thinking.

Here’s how I did it:

  • Create a slider of 33% width, positioned relative with auto left and right margin
  • Set the overflow of the mask to visible
  • Create the normal slides with a width of 100%

Now comes the special/trickey/dirty part. To make it look like it’s continously rotating, add a special slide at the beginning and the end. Those slides actually contain two slides. The slide at the beginning contains the end and the beginning slide, and the end slide too. They have a width of 200%, and the slides in them are 50% wide each. The beginning slide has a left margin of -100%, and the end slide a right margin of -100%.

Now it should work!

7 Likes

Hello everyone.

This is my first time posting so I hope this is the right thread.
I was wondering how to build a slider which has a set hight, displaying multiple slides of variable widths at the same time, while keeping each slide in the middle of the screen.

Essentially I want to build a hero section gallery with portrait and landscape images, much like this;
(at the very bottom of page) (excuse wix link)
http://moonunderwater2015.wix.com/moon

Here is my current effort;
https://preview.webflow.com/preview/moons-top-notch-site?preview=1ee927466ee8484aee24d5618902b996

I have made two slide classes, one for portrait and one for landscape which seems to roughly do the trick.

Setting the slider mask at around 30% makes them move at roughly the right pace, but that is not quite the behaviour I am after. I would like each slide to move to the center of the screen when it is its turn.

I don’t know if I am on the right track, andI don’t mind scrapping the slider and starting over.
I would welcome any suggestions as to how I could make it work.

Thank you very much.

Hi @Moon,

first of all, welcome to the Webflow forums! :wink:

This thread may be helpful (check out the text tutorial that @sabanna made):

http://forum.webflow.com/t/unique-slider-layout/24011/6?u=samliew