Sort and Filter content
on Webflow with MixitUp3

Controls layout

‍

Structure of the Mixer container stays the same. Required structure of the Dynamic Item and process of applying classes were described on previous pages.
‍

For adding a pagination to the page with filtered content we will need another div, with class .control-pagination, where we will setup a structure, which MixItUp plugin will use for inserting its pagination controls.  

Those are independent controls so block can be placed whenever you want, before or after the container with the filtered content, your choice only depends on your design requirements.

‍

Inside the .controls-pagination block add 2 more divs:

• One for contain numbers of pages, should have a class .mixitup-page-list.

• Another one for show the number of filtered elements, should have a class .mixitup-page-stats.
  

‍
To add more control over the design of pagination elements, add a text element inside the .mixitup-page-list div and give it a class .mixitup-control. Style it the way you want your pagination controls look.

‍

‍

Then, add combo-class .mixitup-control-active to the same text element and style it the way you want the active page number looks like.

‍

Also, feel free to style any other of divs, set desirable layout on controls block, etc.

Connecting and enabling Pagination
‍

1. Once you downloaded your MultiFilter extension files, you can upload it to your Dropbox or CitHub account or other cloud service and include it in your project via a script tag, right after the main MixitUp library script.
   ‍

...link-to-your-source/mixitup-pagination.min.js">

2. By default, Pagination functionality is disabled so that you can use MixItUp as normal, even with the extensions installed.
   To enable Pagination for your content, you need to add the pagination configuration option and set the limit items per page.

var mixer = mixitup(containerEl, {
   pagination: {
       limit: 3,
   }
});

        Set desirable value of the limit parameter and publish the site.

‍

More advanced configuration parameters and templates are available on the original plugin documentation page.