Adding ajax load more button to my front page

You should probably just use an appropriate plugin to provide the functionality you're stuggling with.

This https://en-ca.wordpress.org/plugins/easy-load-more/ claims to do exactly what you're looking for with "minimal" theme changes.

Add this to the front-page.php

<?phpget_header();get_template_part ('inc/carousel');?><script>    var now=2; // when click start in page 2    jQuery(document).on('click', '#load_more_btn', function () {        jQuery.ajax({            type: "POST",            url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",            data: {                action: 'my_load_more_function', // the name of the function in functions.php                paged: now, // set the page to get the ajax request                posts_per_page: 15  //number of post to get (use 1 for testing)            },            success: function (data) {            if(data!=0){                jQuery("#ajax").append(data);  // put the content into ajax container                now=now+1; // add 1 to next page            }else{                jQuery("#load_more_btn").hide();                jQuery("#content-load-more-btn").html("<h4>No more results</h4>");            }            },            error: function (errorThrown) {                alert(errorThrown); // only for debuggin            }        });    });</script><section id="ajax"><!-- i have to change div to section, maybe a extra div declare --><?php$the_query = new WP_Query( [    'posts_per_page' => 15, // i use 1 for testing    'orderby'=>'title', // add order for prevent duplicity    'order'=>'ASC',    'paged' => get_query_var('paged', 1) //page number 1 on load] );if ($the_query->have_posts()) {        $i = 0;        $j = 0;        while ($the_query->have_posts()) {            $the_query->the_post();            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>                <div class="row">                    <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>                        <div class="large-front-container">                            <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>                        </div>                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>                        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>                        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>                        <div class="front-page-post-info">                            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>                            <?php get_template_part( 'front-shop-the-post' ); ?>                            <?php get_template_part( 'share-buttons' ); ?>                            <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>                        </div>                    </article>                </div>            <?php } else { // Small posts ?>                <?php if($j % 2 === 0){ echo '<div class="row">';} ?>                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>                    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>                    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>                    <div class="front-page-post-info">                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>                        <?php get_template_part( 'front-shop-the-post' ); ?>                        <?php get_template_part( 'share-buttons' ); ?>                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>                    </div>                </article>                <?php $j++; if($j % 2 === 0){ echo '</div>';}?>                <?php            }            $i++;        }?>    <?php}?></section><div id="content-load-more-btn"><button id="load_more_btn">Load More</button> <!-- button out of ajax container for load content and button displayed at the bottom --></div><?phpget_footer();

And then in the functions.php add this code below:

add_action('wp_ajax_my_load_more_function', 'my_load_more_function');add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function');function my_load_more_function() {    $query = new WP_Query( [        'posts_per_page' => $_POST["posts_per_page"],        'orderby'=>'title',        'order'=>'ASC',        'paged' => get_query_var('paged', $_POST["paged"])    ] );    if ($query->have_posts()) {        $i = 0;        $j = 0;        while ($query->have_posts()) {                $query->the_post();            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>                <div class="row">                    <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>                        <div class="large-front-container">                            <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>                        </div>                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>                        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>                        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>                        <div class="front-page-post-info">                            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>                            <?php get_template_part( 'front-shop-the-post' ); ?>                            <?php get_template_part( 'share-buttons' ); ?>                            <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>                        </div>                    </article>                </div>            <?php } else { // Small posts ?>                <?php if($j % 2 === 0) echo '<div class="row">'; ?>                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>                    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>                    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>                    <div class="front-page-post-info">                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>                        <?php get_template_part( 'front-shop-the-post' ); ?>                        <?php get_template_part( 'share-buttons' ); ?>                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>                    </div>                </article>                <?php $j++; if($j % 2 === 0) echo '</div>'; ?>                <?php            }            $i++;        }        wp_reset_query();    }else{        return 0;    }    exit;}

I think your loop settings in front-page.php have issues to resolve, in the posts-per-page parameter, displays the posts-per-page + 1 results.

Let me know if this resolve your question.