When changing the slide, height 0 is added

[JNExtremo]

Hi guys. The problem of working in a while loop on wordpress. When changing the slide, the height 0 is added to the div class=before-after twentytwenty-container

<div class="s2_divy">
    <div data-current="Tab 1" data-easing="ease" data-duration-in="300" data-duration-out="100" class="tabs w-tabs">
        <?php if( have_rows('galereya_rabot') ){ ?><div class="tabs-menu w-tab-menu"><?php global $parent_id; $parent_id = $loop_id; $loop_index = 0; $loop_title="Галерея работ"; $loop_field = "galereya_rabot"; while( have_rows('galereya_rabot') ){ global $loop_id; $loop_index++; $loop_id++; the_row(); ?>      
        <a data-w-tab="Tab <?php echo get_row_index() ?>" class="tab_link w-inline-block w-tab-link <?php if(get_row_index() === 1) echo 'w--current'; ?>">         
            <img src="<?php $field = get_sub_field('prevyu_knopka'); if(isset($field['url'])){ echo($field['url']); }elseif(is_numeric($field)){ echo(wp_get_attachment_image_url($field, 'full')); }else{ echo($field); } ?>" loading="lazy" alt="<?php echo esc_attr($field['alt']); ?>" class="img_preview" title="<?php echo pathinfo($field['filename'])['filename'] !== $field['title'] ? esc_attr($field['title']) : ''; ?>">
        </a><?php } ?></div><?php } ?>
                                <?php if( have_rows('galereya_rabot') ){ ?><div class="w-tab-content"><?php global $parent_id; $parent_id = $loop_id; $loop_index = 0; $loop_title="Галерея работ"; $loop_field = "galereya_rabot"; while( have_rows('galereya_rabot') ){ global $loop_id; $loop_index++; $loop_id++; the_row(); ?>
        <div data-w-tab="Tab <?php echo get_row_index() ?>" class="tab_cont w-tab-pane <?php if(get_row_index() === 1) echo 'w--tab-active'; ?>">

        <div class="content">
    <div class="before-after"  style="height: 100%;">
        <img src="<?php $field = get_sub_field('foto_do'); if(isset($field['url'])){ echo($field['url']); }elseif(is_numeric($field)){ echo(wp_get_attachment_image_url($field, 'full')); }else{ echo($field); } ?>" loading="lazy" alt="<?php echo esc_attr($field['alt']); ?>" class="before-after__item" title="<?php echo pathinfo($field['filename'])['filename'] !== $field['title'] ? esc_attr($field['title']) : ''; ?>">
        <img src="<?php $field = get_sub_field('foto_posle'); if(isset($field['url'])){ echo($field['url']); }elseif(is_numeric($field)){ echo(wp_get_attachment_image_url($field, 'full')); }else{ echo($field); } ?>" loading="lazy" alt="<?php echo esc_attr($field['alt']); ?>" class="before-after__item" title="<?php echo pathinfo($field['filename'])['filename'] !== $field['title'] ? esc_attr($field['title']) : ''; ?>">
    </div>
</div>   
</div>                              
<?php } ?></div><?php } ?>
</div>
</div>
<script>
        $(function() {
            $(".before-after").twentytwenty({
                no_overlay: true,                
            });         
});     
    </script>
<style>
    .content {
        width: 100%;
        height:100%;        
}       
</style>