Archive page - problem with pagination

Question

I have a problem to display pagination using WP_Query. I've created a custom page, code below:

<?php
/*

Template name: Models

*/
?>
<?php get_header(); ?>
<?php the_post();?>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/models.css">   
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsive-min.css">
<section id="galery" style="background-image:url('<?php the_field('tlo');?>');">
<div class="container">
<?php $kat = get_field('kategory');?>
<?php $the_query = new WP_Query(array('post_type' => 'modelki', 'taxonomy' => $kat, 'posts_per_page' => '4')); ?>
<?php $i=1;?>
<?php if($the_query->have_posts()) : ?> 
    <?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <article class="item">
        <a class="buka" href="#data-<?php echo $i;?>">
        <div class="layer"><span></span></div>
            <img src="<?php the_field('thumb');?>" alt="buka">
        </a>
        <div class="text">
            <?php the_title(); ?>
            <a class="more buka" href="#data-<?php echo $i;?>">WIĘCEJ &nbsp; ></a>
        </div>      
        <div style="display:none">
            <div id="data-<?php echo $i;?>" class="fan">
                <?php $galeria = get_field('gallery'); ?>
            <?php if( $galeria ): ?>
            <div class="swiper-fans buka-<?php echo $i; ?>">            
            <a class="arrow-left" href="#"></a> 
            <a class="arrow-right" href="#"></a>
              <div class="swiper-wrapper">                  
                <?php foreach( $galeria as $obrazek ): ?>
                    <div class="swiper-slide" style="background-image:url('<?php echo $obrazek['sizes']['large']; ?>');"></div>
                <?php endforeach; ?>
              </div>
            </div>
            <?php endif;?>
                <div class="mym">
                    <h2><?php the_title();?></h2>
                    <div class="opis"><?php the_field('more_data');?></div>
                </div>
            </div>
        </div>
    </article>
    <script type="text/javascript">
    $(function(){
      var myBuka = $('.buka-<?php echo $i; ?>').swiper({
        mode:'horizontal',
        loop: true
      });
      $('.arrow-left').on('click', function(e){
        e.preventDefault();
        myBuka.swipePrev();
      })
      $('.arrow-right').on('click', function(e){
        e.preventDefault();
        myBuka.swipeNext();
      })
    })    
    </script>
    <?php $i++;?>
    <?php endwhile; ?>
<?php endif; ?>
<div class="pagination">
    <?php echo generatePagination(get_query_var('paged'), $the_query); ?>
</div>

It should work, all looks fine, but all pages display only the 1st four posts.

Any sugestions?

Answer 1

Thanks Pat J

I'have got solution now:

<?php  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;  ?>
<?php $offset = ($paged - 1) * 4;?>
<?php $kat = get_field('kategory');?>
<?php $query = new WP_Query(array('offset' => $offset,'post_type' => 'modelki', 'taxonomy' => $kat, 'posts_per_page' => '4')); ?>

Answer 2

You're using the argument 'posts_per_page' => '4' in the WP_Query.

That is why only 4 posts are showing up per page.