Infinite Slider Hack

Design help Custom code
23

Hi all! First of all thank you for this hack @Andre_Pascal_Fuentes !
I was trying to use your code and div structure but unfortunately it doesn’t work.
The only thing I changed is the name of the class “blue” with “div-slide”.
Can you please check if I missed something?

Thank you

P.S.: The slider is the one at the bottom of the page.

My read-only link: Webflow - priscabrown

24

Is there a way to make this work for the Finsweet CMS slider? @Andre_Pascal_Fuentes

2 Likes
25

Hi Andre. I tried this but unfortunately it is not working. I have 4 slides and it in 1st I am showing 3. After the 4th one it should repeat the 1st slide again. But it is not happening. Is there a way to do it?

26

Hey,

Thank you for your little slider hack. Unfortunately it’s not working for me either and I dunno what I did wrong.

Here is my Read-Only Link:
https://preview.webflow.com/preview/physiotherapie-augenstein?utm_medium=preview_link&utm_source=designer&utm_content=physiotherapie-augenstein&preview=89fa198615b50b5cca4f0d85d52635d5&workflow=preview

And here’s my preview Link:

It’s all about this slider called “.slider praxis”

image
image1920×452 37.1 KB

1 Like
27

Hey,

just wanted to let you know we found a solution for my problem.

  1. We had a class called .boxborderradius with an overflow property. There should not be an overflow override!

  2. The .div-put is set as flexbox and the flex child (the image inside the .div-put) needs this properties set:
    image

Here is the overall structure and properties we set (in case the view only link goes down somehow or we make edits)

Screenshot 2022-06-03 at 10.13.36
Screenshot 2022-06-03 at 10.13.36508×1277 70.1 KB

Screenshot 2022-06-03 at 10.13.24
Screenshot 2022-06-03 at 10.13.24496×1251 70.9 KB

Screenshot 2022-06-03 at 10.11.33
Screenshot 2022-06-03 at 10.11.33495×1303 77 KB

Screenshot 2022-06-03 at 10.22.32
Screenshot 2022-06-03 at 10.22.32549×1166 83.6 KB

Thank you and keep up the great no-code work!

-Alex

28

Hey Andre! Thank you for this, it works pretty nicely. Except for when I add slide in-out animations. Then it just gets crazy. If you have an X number of slides, then when the Xth gets into the mask, the anim just gets applied to all the following slides too.

Here’s a Loom. I have 4 slides and the 4th one triggers the card BG color change for all of them.

Is there any workaround for that?

29

image
image1146×660 56 KB

image
image1149×701 55.9 KB

30

Did you find a solution to this? I’d love to be able to do this with Finsweet’s CMS Slider Attribute.

31

Yeah, would be awesome if this works with CMS Slider Attribute. anyone?

32

I started using splide.js. Its pretty simple. You can watch a tutorial for this on youtube. Can connect with you if you need help with it.

33

Hi, I would love to use this. I am quite new to webflow. Where are you meant to put the custom code? I’ve created the div boxes. I can’t find anywhere to actually put this code though.
Thanks,
Alex

34

Amazing hack! It works perfectly :heart:

35

The code is good except Webflow interactions/animations stop working when you scroll to the last slide, to the point where its gets cloned. Here is the new code, where this issue is fixed:

<script>
  $(document).ready(function() { 
    var clonedElement = $('.blue').clone();
    $('.div-put').last().append(clonedElement);
    
    // Reinitialize Webflow interactions
    setTimeout(function() {
      Webflow.require('ix2').init();
    }, 100);
  });
</script>