Page navi slider

An advanced and fully customizable navigation plugin using jQuery slider.

Author:Iznogood1 (profile at wordpress.org)
WordPress version required:2.7
WordPress version tested:5.8.2
Plugin version:1.3.5
Added to WordPress repository:14-09-2013
Last updated:12-11-2021
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:100
Rated by:6
Plugin URI:
Total downloads:42 016
Active installs:1 000+
plugin download
Click to start download

Unsatisfied by the most common navigation plugins?

Need a cool one, fully and easyly customizable with direct preview in setting page…

Want an actually responsive plugin…

Just get it!

This plugin generates cool pagination links

  • Easy to customize with its setting page
  • See what you get thanks to its preview feature
  • Actually responsive as it displays a slider if the page numbers exceed the available width
  • Touchscreens compliant
  • Caption ready to be localized for multilingual sites

CSS

CSS is located in /wp-content/plugins/page-navi-slider/style/page-navi-slider.css

List of used class

  • .wpns_wrapper : the wrapper of the plugin
  • .wpns_container : a ‘sub-wrapper’ needed to set alignment, margins, …
  • .wpns_title : the caption
  • .wpns_selector : everything but the caption
  • .wpns_window : everyting of the selector but the slider
  • .wpns_sliding_list : the list of page numbers
  • .wpns_selector .wpns_element : elements of the list
  • .wpns_selector .page-numbers : page numbers (the text inside each element)
  • .wpns_first : first element of the list
  • .wpns_last : last element of the list
  • .wpns_active : the current element
  • .wpns_inactive : the other elements (all except the current one)

References

Faitmain-Faitcoeur

Faitmain-Faitcoeur The first site that has ever used page-navi-slider

Stranger-JP

Thanks to stranger-jp who translated in Japanese (and found some bugs!)

Jonhathan @ Geekpress

Thanks to Jonathan for the pagination links tuto

WordPress Codex

Settings page built according to theses WordPress Codex instructions

PixToEm

CSS sizes calculation made with PxToEm

StyleNeat

CSS optimized with StyleNeat

Write code online

PHP tested with Write code online

JS Fiddle

js scripts tested with JS Fiddle

JS compress

JS Script minimized with JS Compress

JSColor

Color picker of the settings page by JS Color

PoEdit

Localization with PoEdit

jQuery Touch Punch

jQuery slider adaptated for touchscreens by that jQuery Touch Punch

jQuery and Co

jQuery, jQuery UI, jQuery UI slider and accordion