This sample uses multiple Swipe components to create an seemingly infinite scroll between different Educational Attainment layers in Mexico.
How it works
For each layer loaded from a WebMap, a Swipe is created, and the layer is added to the trailing.
// create a swipe component for each layer
const swipes = layers.map((layer) => {
layer.visible = true;
const swipe = document.createElement("arcgis-swipe");
swipe.trailingLayers = [layer];
// set other swipe properties
return swipe;
});When the user scrolls through the app, the leading and trailing update as the Swipe's position changes to achieve the infinite scroll effect.
// To achieve this infinite scroll effect we need to swap the layers:
// The layer starts at the bottom, the divider goes up.
// Then the next layer starts to show up, so we put back the divider at the bottom and swap the layers.
if (position < 0 && swipe.trailingLayers.length) {
swipe.leadingLayers.addMany(swipe.trailingLayers);
swipe.trailingLayers.removeAll();
} else if (position >= 0 && swipe.leadingLayers.length) {
swipe.trailingLayers.addMany(swipe.leadingLayers);
swipe.leadingLayers.removeAll();
}