Splide Slider view not rendering correct amount of translated content

Created on 12 June 2025, 22 days ago

Problem/Motivation

Hello, I have a view using Splide Slider that is not rendering translated content properly on the front-end. The view preview shows two results, while the rendered view always only shows only 1 result. This happens with multiple view blocks I have created.

We use have two languages available on our website: English and French. English is the original language and French is the translation language. The issue occurs regardless if I have the language settings set to Domain or Prefix.

The view in question uses Splide Slider to display a carousel of 3 content pages on desktop, 2 on tablet, and 1 on mobile. The slider settings use an Optionset I created called Carousel which contains 2 breakpoint settings. If I set the Optionset to the Default, all English and French content pages are render. However, when I set my Optionset to Carousel, the French side always only shows 1 result while the English shows the correct amount.

It seems the bug is present when I use a custom Optionset. I've attached that config file to this issue.

Steps to reproduce

  1. Have a website with both English and French languages enabled. English as the default language.
  2. Create some content in English and translate to french.
  3. Import my configuration attached below or create a new option set which has 3 breakpoints and each breakpoint should show different amounts of content per page.
  4. Create a view that uses Splide Slider that uses the new Optionset
🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇨🇦Canada tklepsch

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @tklepsch
  • 🇮🇩Indonesia gausarts

    Thank you.

    Be sure to follow and reply to each of the following so we both understand the underlying issue if none does not resolve your OP.

    > I have a view using Splide Slider that is not rendering translated content properly on the front-end.
    Is it a View style at the topmost format section? Or a regular field formatter at Fields section?
    Read more about Views Gotchas in the docs, or at Slick Views similar Gotchas, and confirm if it fixes your issue?

    > The view preview shows two results, while the rendered view always only shows only 1 result. This happens with multiple view blocks I have created.

    See the output at your frontend, not Preview section due to narrow estate confusing your judgement, and confirm if that solves it?

    Proceed your debug if the above doesn't fix the issue.

    > If I set the Optionset to the Default, all English and French content pages are render. However, when I set my Optionset to Carousel, the French side always only shows 1 result while the English shows the correct amount.

    Looks like a problem with your own understanding about how the options work?
    Until you grasp it all properly, try the defaults which you said works:
    mediaQuery: min, change it to max.
    perPage: 1, to the 3 or so. This is probably your other issue.
    breakpoint: 1024, change it to 1023, or 1025

    Other potential issue is how you set up your language settings on the Views UI itself. To narrow down such an issue is to use the regular Node page with it's Manage display > field formatter. Thus you can rule/ single out your Views mastery from the proper judgment of the problem.

    The best way to judge it as a bug to use the provided Splide samples. One of them has the same exact as yours, only different combo of options.

    Let me know?

  • 🇨🇦Canada tklepsch

    Hi gausarts,

    The views Format is set to Splide Slider. The Format is showing as Fields (multiple fields). If I do set the Format to Unformatted list, the french results all show correctly.

    The Optionset settings are fine as they work on the English pages. I did try changing breakpoint settings to match your specifications (cleared cache as well) and the French page results would showed the following:
    - 3 results on desktop. Arrows and pagination did not render on the front end but they should.
    - 1 result on both tablet and mobile. Arrows and pagination did not render on the front end but they should.

    I also installed splide X and tried out the carousel sample included and the same issue occurs.

  • 🇮🇩Indonesia gausarts

    Looks like something change with perPage? You can play around with the expected number, whichever works here.

    Please screenshot two forms:

    • Views Splide Slider form
    • Image/Media field form under Fields section

    And we can proceed from there.

  • 🇨🇦Canada tklepsch

    Attached the screenshots for the slider form and image field. Note there's also a Summary field is also in the settings as a caption field.

    I tried enabling Vanilla Splide out of curiosity and the translated view page still shows only 1 element. Switching the image formatting did nothing as well. I also tried switching to the Stark theme to see if maybe it was something in my theme causing it, but same result.

  • 🇮🇩Indonesia gausarts

    Two possible causes:

    • Fill in Skin main with at least Default.
    • Change Banner Image to a Blazy formatter, and tick or until Use field template option as described in the Gotchas above.

    Clear caches as usual unless on a strict dev environment.

    Read more on Splide Views section or at the previous previous Slick Views USAGES section for the supported and working configurations.

    Be sure to follow the USAGES section strictly. Only break any rule once you master the ins and outs of it.

    Let me know.

Production build 0.71.5 2024