Different layers and basemaps on both sides with OpenLayers layer swipe

Question

I have created a webmap with a layer swipe using OpenLayers 6.3.1 like this. My goal is to display different WMS layers on both sides with different base maps. For now, I have made it so that I can display layers on one side or the same layers on both sides at the same time with different base maps. What I want to do is to have different WMS layers on each side with different base maps.

If this is possible using layer swipe, then how?

I know that shared view (link here) could be a solution but I must use layer swipe.

The code for the layer swipe:

    const aerial = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'https://wxs.ign.fr/ortho/geoportail/r/wms',
      params: {'LAYERS': 'HR.ORTHOIMAGERY.ORTHOPHOTOS', 'TILED': true, 'SRS': 'EPSG:3857'},
      serverType: 'geoserver'
  })
  
});

class Swipe extends CustomLayer {
   // Initialize the Custom Layer
  constructor(id, layer, legend, handle = false) {
    // Initialize CustomLayer superClass
    super(id, layer, legend, handle);
    // Define events on the Tile Layer
    aerial.on('prerender', function (event) {

      var ctx = event.context;
      var width = ctx.canvas.width * (swipe.value / 100);
      ctx.save();
      ctx.beginPath();
      ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
      ctx.clip();
    });
    // Define events on the Tile Layer
    aerial.on('postrender', function (event) {
      var ctx = event.context;
      ctx.restore();
    });
  }
}
// Create The Custom Layer
new Swipe("swipe",aerial);

The const aerial is defined as being the basemap on the right side. I want to add a WMS on the right side. The layers on the left side are already functional.

Answer 1

The best solution for my problem was to use layer groups. I created a group layer in GeoServer where I combine the base map and my other data layers. I then added the layer as a WMS to my map.

If both are tile layers (you use TileWMS) call the prerender on the first layer and postrender on the last layer on that side - or first and last component layers of a group as in codesandbox.io/s/layer-swipe-forked-ergq99?file=/main.js Mixing Image and Tile layers might not work with view rotation as they are rotated differently.

The solution provided by @Mike is an interesting solution but it is not suitable for my problem as it doesn't work regarding the complexity of my code files. I advise others to read his answer as well.