twentytwenty icon indicating copy to clipboard operation
twentytwenty copied to clipboard

When changing the slide, height 0 is added

Open JNExtremo opened this issue 2 years ago • 0 comments

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>

JNExtremo avatar Mar 16 '22 09:03 JNExtremo