<?php
$slider = 'gallery_slider';
if (have_rows($slider)) :
$i = 0 ;?>
<div class="section-gallery" data-animation>
    <div class="site__container">
        <div class="grid">
            <div class="grid__item push--tab--one-twelfth tab--ten-twelfths">
                <div class="section-gallery__inner" data-gallery>
                    <?php while (have_rows( $slider )) : the_row();
                        $image = get_sub_field('image');
                        $caption = get_sub_field('caption'); ?>
                        <div class="section-gallery__item">
                            <div class="section-gallery__item__image">
                                <?php MOZ_Image::background( $image['id'], 'Medium', array(
                                    'large' => '(min-width: 768px)'
                                ), array( 'class' => '' ), array( 'lazy' => false ) ); ?>
                                <?php /* <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/> */ ?>
                            </div>
                            <?php if ($caption) : ?>
                                <div class="section-gallery__item__caption"><?php echo $caption ?></div>
                            <?php endif; ?>
                        </div>
                        <?php $i++;
                    endwhile; ?>
                </div>
                <div class="section-gallery__item__paging"></div>
                <?php if ($i>1) : ?>
                    <div class="section-gallery__controls">
                        <div class="section-gallery__prev"><?php MOZ_SVG::svg('arrow'); ?></div>
                        <div class="section-gallery__next"><?php MOZ_SVG::svg('arrow'); ?></div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>