Infinite Slider Hack

Hey guys!

I made a hack for make the Webflow Slider to go infinite, and don’t show the original blank at the end of it.

Love to hear what y’all think about it!

https://webflow.com/website/infinite-slider-hack


Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/infinite-slider-hack?utm_medium=preview_link&utm_source=showcase&utm_content=infinite-slider-hack&preview=094da3ae23a21b26350058f71b186e9a)
(how to share your site Read-Only link)

6 Likes

Hey! I would LOVE to use this, but when you put a read-only link, it strips out any custom code when you clone. :frowning: Is there any way you can share the extra code you used?

hey @NicholasRyanH, how you doing man?

I update the project, so we have it now on the page.

Any question, please let me know!

You are the coolest! Thank you!

1 Like

Got it to work! Thank you so much, it’s brilliant!!!
EDIT: One thing I noticed. When you clone this into your page, the script end tag switches location! So people should copy the code from the Read-Only link, NOT from the code when it’s cloned into your site!

Oi Andre! Nem acredito que encontrei esse seu post. Eu estou aprendendo um pouco mais sobre o Webflow e meu problema atual é exatamente esse! Mas, eu tentei seguir os direcionamentos e não deu certo… talvez eu esteja entendendo alguma coisa errada, será que você consegue me explicar em português mesmo? Muito obrigada!

Hi Andre, I discovered another issue. On mobile the size of the images is incorrect (they squish down) and the left/right navigation arrows disappear. Any ideas how to fix that?

EDIT: Ah! I see, you just hid the arrows in their class on mobile. Figured it out, thanks!

Darn, just discovered a new issue. Unfortunately, this won’t work with lightbox images. Bringing up the lightbox on the repeated slides is very inconsistent. :frowning: Any ideas on how to make it work better with Lightbox?

Yes, I just have a friend with the same problem with Lightbox… this is a problem that I don’t think this hack could solve, unfortunately. I think it’s because when you clone() it inside, the webflow js to the lightbox already loaded, and do not get the new elements, you know?

I have to think more about it.

I understand, thank you for thinking about it! If you ever get a solution, please let me know, it would be awesome!

Wow thanks so much for this. I tried messing around with this hack and I was wondering is there any way to put things before the first child? As I centered my slider as you can see with the provided link, you can see when you scroll right its okay but when you go left it ends.

How would I do this? .first .prepend?

https://preview.webflow.com/preview/yano?utm_medium=preview_link&utm_source=designer&utm_content=yano&preview=86da2fe708a76feb600d4c27d0f65142&pageId=6054856a145386c4c02a8b68&mode=preview

1 Like

golden!
If I may, this should be default in webflow editor, it looks horrible without this.

2 Likes

@Finsweet this would be cool to add to y’alls CMS slider :eyes:

1 Like

code



Hi Andre, hope you’re doing well. I did everything like in your project but it doesn’t work (maybe I’m missing smth?)

Hey! I’m very busy right now, but send the preview link and the URL link so I can help you.

Hello this message is for those of you that may be having issues with the slide content being mushed all into the last slide. Note that the element with the class blue also has the CSS property flex: 0 0 auto; which makes the element not shrink or grow within the flex parent. Hope this helps!

1 Like

Tried using with my CMS Slider but couldn’t seem to get it to work. Is there something I would need to change for that?

Hi @WINGMN_CO, can you share the preview link or URL?

1 Like

@Andre_Pascal_Fuentes

Thank you for this useful hack!

@Andre_Pascal_Fuentes @NicholasRyanH & all:

In order to lightbox work you have to reinitialize webflow.js:

<script>
$(document).ready(function() {  
  $('.div-put').last().append($('.blue').clone());
  window.Webflow && window.Webflow.destroy();
  window.Webflow && window.Webflow.ready();
  window.Webflow && window.Webflow.require( 'ix2' ).init();
})
</script>

Works like a charm! :grinning:

2 Likes

Thank you @piotr_k, this is super helpful!

1 Like