Looping slider not working on Mobile

Hey team, my testimonial slider is working on desktop, but on mobile the initial slide is blank. If I then click the previous slide button, slides show, but if I click the next button the slides are blank. Links and screenshot below. Need this fixed quickly as thee page will launch this week. :crossed_fingers:

Please see:
https://liberate-new-website.webflow.io/landing-test
Read only:
https://preview.webflow.com/preview/liberate-new-website?utm_medium=preview_link&utm_source=designer&utm_content=liberate-new-website&preview=f3c9e1c9131b0d6f7052790aa50da1e3&pageId=6707954fd120fd8172cf7565&workflow=preview

Hey @hello6! I see the staging page is unpublished and the page on the project deleted. Are you still facing this issue?

Hey @Support-Luis ! Yes, sorry page was moved. It’s here now: Liberate for Agency Owners

Hi @Support-Luis Can you have a quick look, thanks

Hey @Support-Luis, you seem to be the only Finsweet support person active these days. Client is happy to pay for the slider when we launch these pages, but I need it working. Hope you can help.

Hey @hello6! Apologies for the delay, I am checking your site as we speak.

@hello6, I’ve tested the site and the Loop seems to be working as expected. Have you modified anything to fix the bug?

Hey @Support-Luis , I’ve reimplemented to see if that would fix it and it did. The only issue now is that it doesn’t infinitely loop. When you get to the last slide, the next one appears blank

hey @hello6! I may have spotted the cause, let me do some more tests and get back to you. In the meantime, could you please share either some screenshots or a quick loom to see your configuration on the app?

Thanks @Support-Luis , here is a Loom of the App setup Webflow - Liberate - 22 October 2024 | Loom

Thank you @hello6! I’ve replicated the slider here with the looping working on mobile → Loop Slider

The only difference we seem to have is that I have set the slides per view to be 3 instead of 1.

Can you test and let me know how it goes?

Hey @Support-Luis, not sure this is going to work for my use-case. Here is a video showing a fix. Although it would mean an update to the app. This would make it more powerful though.

Thanks @hello6! We won’t need to wait for an update on the app luckily. You can add these decimal points with the API!

Can you add this code to your site?

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      console.log('slider Successfully loaded!');

      // The callback passes a sliderInstances array with all the sliderInstance instances on the page.
      const [sliderInstance] = sliderInstances;

      sliderInstance.params.slidesPerView = 1.25; // modify as needed

      sliderInstance.update();
    },
  ]);
</script>

Thanks @Support-Luis, this works :blush:

1 Like

Hey @Support-Luis , further to the above. I now have a page with an additional slider. Can the script be adapted to only effect fs-slider-instance=testimonial-slider

Hey @hello6! Sure, we will just need to specify the instance of the slider to affect. At the moment it is set to the first slider on the page.

We can modify the selection if the testimonial-slider is not the first one on the page where you have the 2 sliders.

Please share a link to the page and I will check :wink:

Hey @Support-Luis it’s “Home New” on Webflow - Liberate

@Support-Luis Also my client purchased the slider (I can forward receipt if needed), but it’s not working on the live site. Liberate for Agency Owners

Was there something else they (or I) should have done?

Hey @hello6! They may have forgotten to link their domain to their subscription. Can you please tell them to go to https://my.finsweet.com/subscriptions and add the URL to the subscription?

If they need any help please send me a DM and I can take a look :muscle:

1 Like

Hey @Support-Luis , this is still an issue. I shared the page below as requested. Thanks!