What if each of the .text (in my case .map) width is set to auto with an image child element for each? How do we trigger the animation to move the panels left or right?
If I set the width of .map to 100%, the animation works but if I set the width to auto, the animation is not triggered. Each of the image maps span more than the device's width.
<div id="maps-wrapper" class="h-screen overflow-hidden">
<div id="maps" class="relative flex items-start">
<div class="map relative h-screen w-auto flex-shrink-0 box-border">
<img class="object-cover h-screen w-full" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-1.jpg" alt=""/>
</div>
<div class="map relative h-screen w-auto flex-shrink-0 box-border">
<img class="object-cover h-screen w-auto " src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-2.jpg" alt=""/>
</div>
<div class="map relative h-screen w-auto flex-shrink-0 box-border">
<img class="object-cover h-screen w-full" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-3.jpg" alt=""/>
</div>
<div class="map relative h-screen w-auto flex-shrink-0 box-border">
<img class="object-cover h-screen w-full" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-4.jpg" alt=""/>
</div>
</div>
</div>