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('.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
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
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.