Infinite scroll on product media gallery

[Thomas86]

Hi there,

I would like my product photo gallery to be infinite, meaning that the scroll never stops and that you return to the first image as soon as you have finished viewing everything.

I know it’s linked to Flickity but I can’t find it in the code. Here’s my url: https://yokaiclothing.com

Thank you for your help!

[Michkyy]

@Thomas86

I would like my product photo gallery to be infinite, meaning that the scroll never stops and that you return to the first image as soon as you have finished viewing everything.

I know it’s linked to Flickity but I can’t find it in the code. Here’s my url: https://yokaiclothing.com

Thank you for your help

I see what you mean; you’d like your product gallery to loop infinitely so that it restarts from the first image seamlessly. That’s definitely possible with Flickity or a custom JS tweak.

Do you happen to feel comfortable editing the theme code yourself, or would you prefer that I step in and handle it directly for you? That way, I can make sure it works smoothly without affecting your store layout.

[Parampreet]

@Thomas86

I would like my product photo gallery to be infinite, meaning that the scroll never stops and that you return to the first image as soon as you have finished viewing everything.

I know it’s linked to Flickity but I can’t find it in the code.

Hi @Thomas86

To make it infinite, find where the Flickity carousel is initialized (often in a JS file like product-media-gallery.js, theme.js, or inside assets/).
Find code like below:

$('.product__media-wrapper').flickity({
  cellAlign: 'left',
  contain: true
});

add the wrap-around option:

$('.product__media-wrapper').flickity({
  cellAlign: 'left',
  contain: true,
  wrapAround: true
});

If you don’t find Flickity directly, search your theme code for “flickity”. It can be either in one of below:

assets/theme.js

assets/product-gallery.js

snippets/product-media-gallery.liquid

Thanks

[tim_1]

Since you unlikely to autoupdate your theme, you need to find the <flickity-carousel ...> element in your product section.

I see it like this, but of course, in theme code it will be different:

<flickity-carousel click-nav flickity-config="{
       "adaptiveHeight": true,
       "dragThreshold": 10,
       "initialIndex":".is-initial-selected",
       "fade": false,
       "draggable":">1",
       "contain": true,
       "cellSelector":".product__media-item:not(.is-filtered)",
       "percentPosition": false,
       "pageDots": false,
       "prevNextButtons": false
      }"
      id="..."
      class="product__media-list">

You need to add a "wrapAround": true in config, like this:

<flickity-carousel click-nav flickity-config="{
       "adaptiveHeight": true,
       "dragThreshold": 10,
       "initialIndex":".is-initial-selected",
       "fade": false,
       "draggable":">1",
       "contain": true,
       "cellSelector":".product__media-item:not(.is-filtered)",
       "percentPosition": false,
       "pageDots": false,
       "prevNextButtons": false,
       "wrapAround": true
      }"
      id="..."
      class="product__media-list">