{"id":1753,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/slider\/article11.html"},"modified":"2020-01-31T11:23:50","modified_gmt":"2020-01-31T16:23:50","slug":"faded-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/faded-slider.html","title":{"rendered":"&#8220;Faded&#8221; Slider"},"content":{"rendered":"<ul class=\"desc-links\">\r\n\t<li><a href=\"http:\/\/livedemo00.template-help.com\/joomla_35528\/\" class=\"live-demo-button\" target=\"_blank\">Live Demo<\/a><\/li>\r\n<\/ul>\r\n\r\n This is a Slider Script that uses fade effect for slide change transition effects. This slider could be used not only for images but for various content blocks as well. You can find full installation and configuration instructions by following <a href=\"http:\/\/slidesjs.com\/\" rel=\"nofollow\" class=\"link3\">this link<\/a>. <br \/> <br \/> <span style=\"font-weight: bold;\">JavaScript<\/span> <br \/>In order to make the script work, the <span style=\"font-weight: bold;\">index-#.html<\/span> file with a slider should contain these lines of HTML code in order to include the <span style=\"font-weight: bold;\">jquery.faded.js<\/span> script and the jQuery framework: <br \/> <p>The <span style=\"font-weight: bold;\">&lt;head&gt;<\/span> section of the <span style=\"font-weight: bold;\">index-#.html<\/span> (or the section just before the closing <span style=\"font-weight: bold;\">&lt;\/body&gt;<\/span> tag) file contains these lines of code that initialize the script functionality with basic values: <br \/><\/p> <p>This script is initialized with a <span style=\"font-weight: bold;\">&lt;div&gt;<\/span> element with the <span style=\"font-weight: bold;\">#faded<\/span> id. Script attributes define the following values:<\/p> <p>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">speed: 300<\/span> &ndash; sets animation speed; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">crossfade: false<\/span> &ndash; crossfades content; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">bigtarget: false<\/span> &ndash; click content for next; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">loading: false<\/span> &ndash; for images only, checks if first image is loaded before showing it; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">autoheight: false<\/span> &ndash; auto adjust height; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">pagination: &#8220;pagination&#8221;<\/span> &ndash; sets <span style=\"font-weight: bold;\">true<\/span> and class name for pagination; set to <span style=\"font-weight: bold;\">false<\/span> to disable this feature; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">autopagination: true<\/span> &ndash; set to <span style=\"font-weight: bold;\">true<\/span> to auto generate pagination; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">nextbtn: &#8220;next&#8221;<\/span> &ndash; next button class; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">prevbtn: &#8220;prev&#8221;<\/span> &ndash; previous button class; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">loadingimg: false<\/span> &ndash; location of loading image (e.g. <span style=\"font-weight: bold;\">\/img\/loading.gif<\/span>) if using loading; <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">autoplay: false<\/span> &ndash; auto play of content (set to positive number for <span style=\"font-weight: bold;\">true<\/span>); also sets time interval (use <span style=\"font-weight: bold;\">1000<\/span> for 1 second); <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">autorestart: false<\/span> &ndash; auto restart if auto play stopped (set to positive number for <span style=\"font-weight: bold;\">true<\/span>); also sets time interval (use <span style=\"font-weight: bold;\">1000<\/span> for 1 second); <br \/>\u2022&nbsp;&nbsp;&nbsp; <span style=\"font-weight: bold;\">random: false<\/span> &ndash; set to <span style=\"font-weight: bold;\">true<\/span> to randomize order.<\/p> <p> <span style=\"font-weight: bold;\">HTML<\/span> <br \/>Below you can see the HTML script representation for images:<\/p> <p>In order to add a slide you will just need to add an image (<span style=\"font-weight: bold;\">&lt;img&gt;<\/span> tag):<\/p> <br \/> Below you can see the HTML script representation for various content: <br \/> <p>In order to add a slide you will just need to a bulleted list item (<span style=\"font-weight: bold;\">&lt;li&gt;<\/span> tag):<\/p> <br \/> <br \/> <span style=\"font-weight: bold;\">CSS<\/span> <br \/>You can find script related stylesheet in the main <span style=\"font-weight: bold;\">style.css<\/span> file. You will need to modify the following styles:","protected":false},"excerpt":{"rendered":"<p>Live Demo This is a Slider Script that uses fade effect for slide change transition effects. This slider could be used not only for images but for various content blocks as well. You can find full installation and configuration instructions by following this link. JavaScript In order to make the script work, the index-#.html file [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[262],"tags":[813,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1753"}],"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=1753"}],"version-history":[{"count":9,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1753\/revisions"}],"predecessor-version":[{"id":86167,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1753\/revisions\/86167"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}