twentytwenty
twentytwenty copied to clipboard
When changing the slide, height 0 is added
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>