Shopify Model Viewer UI inside slideshow

modelviewer-extra.js

/*
A Gist to keep track of what was needed to make the Shopify Model Viewer UI 
propagate events in a way that allows us to use it in a slideshow/carousel.

Works in Slick and Swiper. Other JS was obviously required outside here.
This is just for reference. This was called on a loop for each 3D model.

Add this SCSS:

.shopify-model-viewer-ui {
  .theme-event-proxy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
  }

  .shopify-model-viewer-ui__controls-area--playing + .theme-event-proxy {
    display: none;
  }
}
*/

window.Shopify.loadFeatures([
  {
    name: 'model-viewer-ui',
    version: '1.0',
    onLoad: (function(){
      $(this).data('player', new Shopify.ModelViewerUI(element));
      // insert mouseup event proxy, to allow mouseup to bubble up outside 
      // model viewer ui when player is paused, for carousel swipe gestures
      $('<div class="theme-event-proxy">').on('mouseup', function(e){
        e.stopPropagation();
        e.preventDefault();
        var newEventTarget = $(e.currentTarget).closest('.product-media')[0];
        newEventTarget.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
      }).appendTo(
        $(this).find('.shopify-model-viewer-ui__controls-overlay')
      );
      // when playing or loading, intercept events that bubble up outside the viewer:
      // - prevent bubbling of mouse/touch start, for carousel gestures
      // - prevent bubbling of keydown, for carousel navigation
      $(this).find('model-viewer').on('shopify_model_viewer_ui_toggle_play', function(){
        $(this).closest('.product-media').on('touchstart.themeModelViewerFix mousedown.themeModelViewerFix keydown.themeModelViewerFix', function(e){
          e.stopPropagation();
        });
      }).on('shopify_model_viewer_ui_toggle_pause', function(){
        $(this).closest('.shopify-model-viewer-ui').off('.themeMediaEventFix');
      });
      // ensure play exclusivity
      $(this).find('model-viewer').on('shopify_model_viewer_ui_toggle_play', function(){
        $('.product-media').not($currentMedia).trigger('mediaHidden');
      });
      // set class and re-trigger visible event now loaded
      $(this).addClass('product-media--model-loaded').removeClass('product-media--model-loading');
      if(callbacks.onModelViewerInit) {
        callbacks.onModelViewerInit(element);
      }
      if(autoplay) {
        $(this).trigger('mediaVisible');
      }
    }).bind(this)
  }
]);

@willbroderick, Do you have an update to date version or an HTML structure we can look at?

I don't think this code has changed at all. This has been deployed on many stores and we consider it stable. As for an HTML structure, you could install one of our themes on trial and inspect the gallery in dev tools.

I'm afraid this Gist is more for in-house reference, and for anyone interested, not really as instructions. Apologies if it's not very helpful in isolation.