<div class="image-list row no-gutters">
    <?php $i = 0;
    while ( have_posts() ) : the_post(); ?>

        <div class="col-12 col-lg-6 row no-gutters">
            <div class="col-10 offset-1">
                <a href="javascript:void(0)" class="overlay-toggle" data-target="#carousel-overlay" data-slide="<?php echo $i; ?>">
                    <?php 
                    $image = get_field('image');
                    $size = 'square-sm'; ?>

                    <?php // Image
                    echo wp_get_attachment_image( $image, $size ); ?>
                </a>
            </div>
        </div>			

        <?php $i++;
    endwhile; ?>
</div><!-- .image-list -->



<div class="carousel">
    <?php $i = 0;
    while ( have_posts() ) : the_post(); ?>
        <div>
            <?php 
            $image = get_field('image');
            $size = 'square'; ?>

            <?php echo wp_get_attachment_image( $image, $size ); ?>
        </div>
        <?php $i++; 
    endwhile; ?>
</div><!-- .fullpage-carousel -->

    // Carousel
        $('.fullpage-carousel').slick({
            arrows: true,
            dots: false,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            lazyLoad: 'ondemand',
        });
    
    // Jump To Slide
        $('.image-list a').click(function(e) {
            e.preventDefault();
            var slideno = $(this).data('slide');
            $('.carousel').slick('slickGoTo', slideno)
        });