How to build a swipe able style WooCommerce mobile loop with specific swipe indicator in Bricks?

How To
1

Hi everyone,

I am trying to recreate a premium shopping experience for my WooCommerce store on mobile, mobile layout (see reference image 1).

image0
image01179Ă—2556 141 KB

My Goal:

  1. 2-by-2 Grid: A clean 2-column product grid on mobile (standard WooCommerce loop).

  2. Product Slider: Each product in the grid should allow users to swipe through its product gallery images.

  3. Specific Swipe Indicator: This is the critical part. When a user swipes, a small black bar should move horizontally along with their finger, directly beneath the swiping image. This indicates that more images are available (see the “swipe-line” in the reference image).

My Current Setup & Problem:

  • I am using Bricks builder with the Nestable Slider element inside my product query loop block.

  • I’ve configured the Nestable Slider to show 1 product image per slide and have enabled swiping.

  • The Problem: I cannot find a way to create the specific moving black bar indicator that follows the swipe. Bricks has pagination dots, but that’s not what I need. and I can’t put de right product images on it.

My Question: Has anyone successfully built this exact type of swipe indicator using the Nestable Slider (Splide.js) or any other method within Bricks?

Specifically, I need guidance on:

  • How to structure the indicator element.

  • The required JSON options for the Nestable Slider.

  • Any necessary CSS or JS to synchronize the bar’s position with the swipe action.

Any advice or code snippets would be hugely appreciated. Thank you in advance!

2

I managed to do something similar for my Splide.js nestable slider:

image
image1760Ă—661 207 KB

The only thing that’s not working right now: I cannot click black trackbar part and move it left right, I can only click on grey areas and it jumps that black bar to that part + slider moves.

Everything else works.