0

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') ?>');">
                <p><a 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');">
                <p><a 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('<p><i class="nav-arrow fas fa-chevron-left"></i> anterior</p>');
        next_posts_link('<p>pró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
Improve this question

1 Answer 1

Reset to default
0

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.

Improve this answer
1
  • can you give me more details? I've never used AJAX and even with the documentation, I have no clue where to start
    – lulufv
    Commented Feb 11, 2019 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.