I'm using MixItUp in my project to have an homepage with my items, and I want a pagination, i saw that the plugin actually supports pagination but I couldn't make it work.
Here is my attempt:
Markup:
<div id="main">
<div class="container" id="Container">
<div class="row">
<div class="col-md-3 mix clip">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Videoclip</p>
</div>
</div>
</div>
<div class="col-md-3 mix adv">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Advertising</p>
</div>
</div>
</div>
<div class="col-md-3 mix reportage">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Reportage</p>
</div>
</div>
</div>
<div class="col-md-3 mix clip">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Videoclip</p>
</div>
</div>
</div>
<div class="col-md-3 mix adv">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Advertising</p>
</div>
</div>
</div>
<div class="col-md-3 mix reportage">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Reportage</p>
</div>
</div>
</div>
<div class="col-md-3 mix clip">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Videoclip</p>
</div>
</div>
</div>
<div class="col-md-3 mix adv">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Advertising</p>
</div>
</div>
</div>
<div class="col-md-3 mix reportage">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Videoclip</p>
</div>
</div>
</div>
<div class="col-md-3 mix clip">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Videoclip</p>
</div>
</div>
</div>
<div class="col-md-3 mix adv">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Advertising</p>
</div>
</div>
</div>
<div class="col-md-3 mix reportage">
<div class="item">
<img src="http://placehold.it/300x200" class="img-responsive" alt="">
<div class="caption">
<h1>Title</h1>
<p>Reportage</p>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end main -->
As you can see the plugin is working fine with filters, but the pagination is not even showing.
In the plugin's documentation there's a section dedicated to pagination, although the demo example is not there, so i can't use it as a starting working point.
You can take a look at the documentation here: https://mixitup.kunkalabs.com/extensions/pagination
I followed the instructions and used this JS code:
$('#Container').mixItUp({
pagination: {
generatePagers: true,
prevButtonHTML: '«',
nextButtonHTML: '»'
}
});
I put in the
markup the emtpy div as stated in the docs:
<div class="pager-list">
<!-- Pagination buttons will be generated here -->
</div>
Nothing happens.
Can someone point me in the right direction, I don't know how to go on solving this problem, the plugin seems to support pagination, so I'm hoping to achieve that. Thanks, any suggestion is much appreciated.
