博客轮播水平导航

Question

This code needs to be refactored to be "dynamic" in a preview of all blog posts.

The idea of a carousel was too simple, instead I am looking to make the next buttons call the next 3 blog posts.

How would I do that?

I have resources that say I should call "echo"

<div class="blog-content-discussion glow-blue">
    <div class="main-title">
        All Discussions
    </div>

    <div class="row" style="margin-top:10px; display:flex;">
        <?php
        // create a back link if current page greater than 0
        $curPage = 0;
        if ($curPage == 0) {
        ?>
        <div class="col-md-3">
            <div class="img-box">
                <img src="img/dog-paw.jpeg" height=25 width=25 />
            </div>
            <div><a href="prev" > <i class="fa fa-arrow-left" aria-hidden="true"></i></a></div>

Also the javascript is not working

$('#users').delegate('#next').delegate('#next', 'click', function() {
    $(this).html('Loading...'); // Loader message
    $.ajax( {      
        url: this.href, // URL from next link
        success: function(data) {
            $('#discuss').after(data).remove();
        }
    });
    return false;});

        </div>
        <?php
        } else {
            // otherwise leave the cell empty
            //echo '&nbsp;';
        }

        while($row1=mysqli_fetch_array($res1))
        {
        ?>
        <div class="col-md-3">
            <div class="img-box">
                <img src="img/dog-paw.jpeg" height=100 width=100 />
            </div>
            <div><a href="showpost.php?post_id=<?php echo $row1['post_id'] ;?>"><?php echo $row1['post_owner']; ?></a></div>
        </div>
        <?php
        }
        ?>

        <div class="col-md-3">
            <div class="img-box">
                <img src="img/dog-paw.jpeg" height=25 width=25 />
            </div>
            <div><a href="next" ><i class="fa fa-arrow-right" aria-hidden="true"></i></a></div>
        </div>
    </div>
</div>