Carousel Block

  • pro123
    April 4, 2026 at 4:54 am

    Hi Team,

    I have a few questions.

    1. I have added to the carousel block and would like to have the content/slides aligned on the left. Currently, it’s centered.
    2. Reduce the width between the slides. It’s currenlty set to 5px, but on desktop it’s more due to the limited number of slides.
    2. The progress bar is not visible anymore. I was initially visible

    In the private section, the example page. Could you support with the correct setting?

  • George
    April 4, 2026 at 1:29 pm

    Hey,

    Might be a good idea to not use a carousel for this section. You might as well use a 3-column grid. Is there a specific reason for wanting to use a carousel?

  • pro123
    April 4, 2026 at 11:37 pm

    Hi George,

    Thank you for your reply.I am currently using a custom implementation with Flickity.
    I have temporarily disabled the carousel block, so you can clearly see the current situation.

    My goal is to move away from custom code and use as much of GenerateBlocks’ standard functionality as possible.
    I would like to use the Carousel block to achieve the sliding effect, progress bar and navigation arrows directly from the block.Please check the example pages in the private section. These show exactly what I want to accomplish with the Carousel block.

    As you can see, when the slides do not fill the full screen width, the progress bar and arrows appear and a small part of the next slide remains visible. This gives users a clear visual cue that they can swipe or slide further. This behaviour is especially relevant on tablet and mobile devices, depending on the number of slides.

  • George
    April 5, 2026 at 9:38 am

    Hi there.

    Select the Carousel block and set the POSITION to Relative.

    Relative positioning

    Set the SLIDES PER VIEW and any SPACE BETWEEN.

    Carousel Slides per view - Space between

    For PAGINATION TYPE select Progress Bar.

    Progress bar pagination type

    Add navigation controls.

    Add carousel navigation controls

    Select the Carousel Control container for the left arrow, set POSITION to Absolute and enter the settings shown in the screenshot. Also add a translate(-50%) effect.

    Settings for left arrow control

    Select the Carousel Control container for the right arrow, set POSITION to Absolute and enter the settings shown in the screenshot. Also add a translate(-50%) effect.

    Settings for right arrow control

    Select the container for the Carousel Pagination and set WIDTH to 100%, Position to Absolute, INSET Left to 50%, INSET Bottom to 0, and Z-INDEX to 10. Also, add a translate(-50%) effect.

    Carousel pagination settings

  • pro123
    April 10, 2026 at 12:04 am

    Hi

    Thanks for your reply on the position of the arrows.

    What I’d like to achieve is to ensure that each slide maintains a fixed width across all devices. Once a breakpoint is reached, the progress bar should appear and how can I get the slides aligned to the left to not spread out over de compelte container.

    See the example pages of how it’s currenlty working with Flickity. How can I adjust the view settings for this? To get the same results with the Carousel container.

    Thanks

  • George
    April 10, 2026 at 4:59 am

    Hi,

    Can you please re-add the Flickity slider in the private section?

  • pro123
    April 10, 2026 at 7:34 am

    Hi George,

    The Flickity slider is active on the pages in the private secion. I disabled the carousel container. Just for reference of the layout I am looking for.

  • George
    April 10, 2026 at 9:38 am

    Ok, from the knowledge you have so far, can you start creating your slider so we can see it’s progress? You could set up a private page and share the link.

  • pro123
    April 10, 2026 at 10:21 am

    Hi George,

    I have added a test page with both sliders. See private section

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.