<div class="top-carousel" id="top-slider">


    <?php if( have_rows('slider') ): $i = 0; ?>
    <?php while( have_rows('slider') ): the_row(); $i++; ?>

    <div id="slide-<?php echo $i; ?>" class="carousel-cell" data-id="<?php echo $i; ?>">

        <div class="container-fluid top-hero">
            <div class="row h-100 justify-content-end">
                <div class="top-hero-name hidden-md-down">
                    <h1>
                        <?php echo get_sub_field('slider_name', get_the_ID()); ?>
                    </h1>
                </div>


                <div class="col-xl-8 col-lg-8 col-md-9 col-6 my-auto">
                    <div class="fx-box">
                        <div class="top-hero-text-fx">
                            <h1 class="hidden-md-up">
                                <?php echo get_sub_field('slider_name', get_the_ID()); ?>
                            </h1>
                            <p>
                                <?php echo get_sub_field('slider_info', get_the_ID()); ?>
                            </p>
                            <br>
                            <button class="top-btn-hero">Více</button>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-3 col-6 my-auto text-center">
                    <img class="img-fluid fx-hero-player" src="<?php echo get_sub_field('slider_image', get_the_ID()); ?>">

                    <?php if ( get_sub_field( 'slider_ball' ) ): ?>
                    <img class="img-fluid fx-hero-ball hidden-md-down" src="<?php echo get_stylesheet_directory_uri(); ?>/img/ball.png">
                    <?php else: ?>
                    <?php endif;  ?>
                </div>


            </div>
        </div>
    </div>



    <?php endwhile; ?>
    <?php endif; ?>


</div>
