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