\r\n<script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/sliderPager.js\"><\/script>\r\n<\/pre>\r\n\r\nThe section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:\r\n\r\n
\r\n$(function(){\r\n    $('.pages').slidePager({\r\n        easing:'easeInOutElastic',\r\n        pagernav:'header nav ul li',\r\n        change:function(n){\r\n            if(n!=0){\r\n                $('header h1,header nav').animate({top:'18%'},'slow','easeOutQuint')\r\n            }else{\r\n                if(n==0)$('header h1,header nav'). animate({top:'50%'}, 'slow', 'easeInSine')\r\n            }\r\n        }\r\n    })\r\n})\r\n<\/pre>\r\n\r\nIn the script we specify the class name for the container with the slides – .pages\r\neasing \u2013 animation effect (in this case we use external effects library  –  jquery.easing.1.3.js)\r\npagernav \u2013 here we define the elements that will be assigned class .active when we switch the slides (pages) using .pvev\/.next elements\r\nchange \u2013 this function gets one parameter when we switch the pages \u2013 number of the current slide\r\n\r\nThere are also some additional options you can set:\r\n\r\n\r\nvar deflt={\r\n    speed:1000, \/\/ animation speed in ms, or \/slow\/medium\/fast\r\n    next:'', \/\/ class for the next button\r\n    prev:'', \/\/ class for the prev button\r\n    links:'', \/\/ selector which defines that a link is assigned to id of the slide. E.g.  a[rel=slide]    \r\n    last:'', \/\/ define the number of the last displayed page when pressing next button\r\n    borders: \/\/ if the there\u2019s a border assigned to slides, there might appear a gap equal to n (slide number) * border width. Define the border in pixels to overcome this \u201ceffect\u201d\r\n}\r\n<\/pre>\r\n\r\nHTML<\/h3>\r\nBelow you can see general HTML script representation:\r\nThis is the section with the menu buttons and prev\/next buttons\r\n\r\n\r\n <\/a> <\/a>\r\n  Home Page<\/a><\/h1>\r\n  \r\n    \r\n      Studio<\/a>\\<\/li>\r\n      
Staff<\/a>\\<\/li>\r\n      
Session tips<\/a>\\<\/li>\r\n    <\/ul>\r\n  <\/nav>\r\n<\/header>\r\n<\/pre>\r\n\r\nAnd the block with the pages\r\n\r\n\r\n\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\r\n\r\nCSS<\/h3>\r\n.pages class width should be greater or equal then the total width of its child elements\r\n.page class width should be 100\/n, where n is the total number of slides\r\nSo for the 4 slides (pages) we will get the following css code:\r\n\r\n\r\n.page{\r\n    float:left;\r\n    width:25%;\r\n    height:100%;\r\n    position:relative;\r\n}\r\n\r\n.pages{\r\n    width:400%;\r\n    height:100%;\r\n    position:relative;\r\n}\r\n<\/pre>","protected":false},"excerpt":{"rendered":"Creates a train-like effect when switching between pages. JavaScript We should include jQuery framework and sliderPager.js by pointing src attribute in the script tag to the .js files <script type=”text\/javascript” src=”js\/jquery-1.4.2.min.js”><\/script> <script type=”text\/javascript” src=”js\/sliderPager.js”><\/script> The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values: $(function(){ $(‘.pages’).slidePager({ […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262,270],"tags":[813,816,818],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6669"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=6669"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6669\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}