{"id":6327,"date":"2021-07-12T16:20:00","date_gmt":"2021-07-12T16:20:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=6327"},"modified":"2021-07-09T16:35:47","modified_gmt":"2021-07-09T16:35:47","slug":"pagination-10-clever-unique-examples","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/pagination-10-clever-unique-examples\/","title":{"rendered":"Pagination: 10 Clever &#038; Unique Examples"},"content":{"rendered":"\n<p>Whether it\u2019s a list of blog posts, a photo or video gallery, an image slider, or anything else on a website that has multiple pages, they all have something in common: pagination, or a way to navigate from page to page. While many websites use relatively common layouts and styles for page navigation, this is an area where designers and developers can add some creativity to enhance the user experience. In this post we&#8217;ve compiled 10 <strong>CodePen <\/strong>examples of creative page navigation for your inspiration. We hope these will inspire you to try out some new tricks of your own.<\/p>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/iamjustaman\/pen\/YPLPNR\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive Flexbox Pagination<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YPLPNR\" src=\"\/\/codepen.io\/anon\/embed\/YPLPNR?height=250&amp;theme-id=1&amp;slug-hash=YPLPNR&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YPLPNR\" title=\"CodePen Embed YPLPNR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/ncer\/pen\/xpqemZ\" rel=\"noreferrer noopener\" target=\"_blank\">Swiper<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xpqemZ\" src=\"\/\/codepen.io\/anon\/embed\/xpqemZ?height=250&amp;theme-id=1&amp;slug-hash=xpqemZ&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xpqemZ\" title=\"CodePen Embed xpqemZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/ainalem\/pen\/YOraaR\" rel=\"noreferrer noopener\" target=\"_blank\">Pacman<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YOraaR\" src=\"\/\/codepen.io\/anon\/embed\/YOraaR?height=250&amp;theme-id=1&amp;slug-hash=YOraaR&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YOraaR\" title=\"CodePen Embed YOraaR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/dsenneff\/pen\/gdQJqo\" rel=\"noreferrer noopener\" target=\"_blank\">Yeti Hand<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gdQJqo\" src=\"\/\/codepen.io\/anon\/embed\/gdQJqo?height=250&amp;theme-id=1&amp;slug-hash=gdQJqo&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gdQJqo\" title=\"CodePen Embed gdQJqo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/lbebber\/pen\/lFdHu\" rel=\"noreferrer noopener\" target=\"_blank\">Gooey<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_lFdHu\" src=\"\/\/codepen.io\/anon\/embed\/lFdHu?height=250&amp;theme-id=1&amp;slug-hash=lFdHu&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed lFdHu\" title=\"CodePen Embed lFdHu\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/netzzwerg\/pen\/hfutI\" rel=\"noreferrer noopener\" target=\"_blank\">Pure CSS3 Responsive Pagination<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_hfutI\" src=\"\/\/codepen.io\/anon\/embed\/hfutI?height=250&amp;theme-id=1&amp;slug-hash=hfutI&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed hfutI\" title=\"CodePen Embed hfutI\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/himalayasingh\/pen\/WmNKjE\" rel=\"noreferrer noopener\" target=\"_blank\">Pagination Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WmNKjE\" src=\"\/\/codepen.io\/anon\/embed\/WmNKjE?height=250&amp;theme-id=1&amp;slug-hash=WmNKjE&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WmNKjE\" title=\"CodePen Embed WmNKjE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/cornflourblue\/pen\/KVeaQL\" rel=\"noreferrer noopener\" target=\"_blank\">AngularJS \u2013 Example with logic like Google<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KVeaQL\" src=\"\/\/codepen.io\/anon\/embed\/KVeaQL?height=250&amp;theme-id=1&amp;slug-hash=KVeaQL&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KVeaQL\" title=\"CodePen Embed KVeaQL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/hakimel\/pen\/gfIsk\" rel=\"noreferrer noopener\" target=\"_blank\">Flexing arrows<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gfIsk\" src=\"\/\/codepen.io\/anon\/embed\/gfIsk?height=250&amp;theme-id=1&amp;slug-hash=gfIsk&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gfIsk\" title=\"CodePen Embed gfIsk\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/MarioD\/pen\/OmWaqz\" rel=\"noreferrer noopener\" target=\"_blank\">Infinite<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OmWaqz\" src=\"\/\/codepen.io\/anon\/embed\/OmWaqz?height=250&amp;theme-id=1&amp;slug-hash=OmWaqz&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OmWaqz\" title=\"CodePen Embed OmWaqz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>How Will You Spice Up Your Pagination?<\/h2>\n\n\n\n<p>Did these examples of page navigation give you some ideas? Did they spark your creativity and inspire you to try something different in your next project? Sure, you can stick with the basic, plain old page numbers, but why not kick it up a notch? Let us know if you try something new next time, and be sure to check out our other blog articles\u00a0of code snippets while you\u2019re at it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whether it\u2019s a list of blog posts, a photo or video gallery, an image slider, or anything else on a website that has multiple pages, they all have something in common: pagination, or a way to navigate from page to page. While many websites use relatively common layouts and styles for page navigation, this is [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6328,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,85,145,12,168],"tags":[25,56,94,86,146,116,87,203,217],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/07\/pagination.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1E3","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6327"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=6327"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6327\/revisions"}],"predecessor-version":[{"id":6329,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6327\/revisions\/6329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/6328"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=6327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=6327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=6327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}