Make pagination work as a carousel (custom query)

Question

Make pagination work as a carousel (custom query)

lulufv

2022年3月25日 07:05

I'm using a custom query on my static front page in order to show my posts, but I would like my pagination to work kinda like a carousel (instead of loading an entire new url). So, basically I want just the #slides section to load again. Is this even possible?

This is my code:

body
[... page content ...]
div id="slides" class="slide bg-mediumgray"
div id="gridcontainer" class="carousel"
    ?php
    $paged = (get_query_var('page')) ? get_query_var('page') : 1;
    $counter = 1; //start counter
    $grids = 2; //Grids per row

    global $query_string; //Need this to make pagination work

    $mosaicoMenu = new WP_Query(array(
                'post_type' = 'artist',
                'orderby' = 'title',
                'order' = ASC,
                'posts_per_page' = 8,
                'paged'=$paged
            ));  

    if($mosaicoMenu-have_posts()) :  
        while($mosaicoMenu-have_posts()) :  
            $mosaicoMenu-the_post(); 

    //Show the left hand side column
    if($counter == 1) :
    ?
        div class="griditemleft"
            div class="artista no-padding no-margin" style="background-image: url(?php the_post_thumbnail_url(); ?), url('?php echo get_theme_file_uri('/img/gradient.png') ?');"
                pa href="?php the_permalink(); ?" title="?php the_title_attribute(); ?"?php the_title(); ?span+/span/a/p
            /div
        /div

    ?php
    //Show the right hand side column
    elseif($counter == $grids) :
    ?
        div class="griditemright"
            div class="artista no-padding no-margin" style="background-image: url(?php the_post_thumbnail_url(); ?), url('https://i.postimg.cc/9QS9Mn00/gradient2.png');"
                pa href="?php the_permalink(); ?" title="?php the_title_attribute(); ?"?php the_title(); ?span+/span/a/p
            /div
        /div

        div class="clear"/div

    ?php
    $counter = 0;
    endif;

    $counter++;
    endwhile;

    ?
/div
    div class="pagination-arrows"
        ?php
        previous_posts_link('pi class="nav-arrow fas fa-chevron-left"/i anterior/p');
        next_posts_link('ppróximo i class="nav-arrow fas fa-chevron-right"/i/p', $mosaicoMenu-max_num_pages);
        ?
    /div



    ?php
    endif;
    wp_reset_postdata();
    ?
/div
[... more content ...]
/body

Topic frontpage wp-query pagination custom-post-types Wordpress

Category Web

Alexander Holsgrove · Accepted Answer · 2019年2月8日 20:34

You can load the posts using AJAX. Have a look at the documentation here: https://developer.wordpress.org/plugins/javascript/ajax/

When the first page loads, you have your 8 posts from WP_Query in the carousel. As you click next through the carousel, you'd want to make an AJAX request to load the next post(s) along. For example, after you get to the 8th slide, you make the AJAX request which calls a new WP_Query but using the paged parameter to mimic going to page 2, 3, 4 etc.

Your function will send back the new slides to your page which you can then append to your carousel.

As a warning, there will first be a slight delay with the AJAX load, so if a user is quickly clicking through slides, you may want to start pre-loading the next content before they even click "next slide". Secondly, if you have a lot of posts, you could end up with a lot of slides on the page, potentially slowing down the webpage itself.

Conversley, if you only have a a small number of posts (maybe 50 or 60), an alternative would be to load all of the slides, and use lazy-loading for any images.

Make pagination work as a carousel (custom query)

About