{"id":1752,"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\/article12.html"},"modified":"2020-02-03T03:35:32","modified_gmt":"2020-02-03T08:35:32","slug":"cross-fading-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cross-fading-slider.html","title":{"rendered":"“Cross-Fading” Slider"},"content":{"rendered":"This is a Slider Script that uses cross-fading effect for slide change transition effects.

JavaScript<\/span>
In order to make the script work, the index-#.html<\/span> file with a slider should contain these line of HTML code in order to include the jquery00.js<\/span> script that includes jQuery framework:

The gallery initialization is placed to the end of HTML coding (just before <\/body><\/span> closing tag) and contains all the necessary configuration values.<\/p>

effect<\/span> attribute defines slide transition effect:<\/p>

\u2022    default<\/span> – no transition effect, just switch the image;
\u2022    fade<\/span> – fade effect;
\u2022    slide<\/span> – slides are shifting down.<\/p>

fadeOutSpeed<\/span> attribute defines slide transition speed:<\/p>

\u2022    default<\/span> – 4 seconds;
\u2022    fast<\/span> – 8 seconds;
\u2022    slow<\/span> – 2 seconds.<\/p>

rotate<\/span> attribute defines slide rotation:<\/p>

\u2022    true<\/span> – slides are showing continuously;
\u2022    false<\/span> – each slide is shown only once.<\/p>

HTML<\/span>
Below you can see the HTML script representation:
<\/p>

Make sure that the number of navigation buttons (<a><\/span> tags inside the <div><\/span> tag with .tabs<\/span> style) should be equal to the number of slides.<\/p>

CSS<\/span>
You can find script related stylesheet in the main style.css<\/span> file. You will need to modify the following styles:<\/p>","protected":false},"excerpt":{"rendered":"

This is a Slider Script that uses cross-fading effect for slide change transition effects. JavaScript In order to make the script work, the index-#.html file with a slider should contain these line of HTML code in order to include the jquery00.js script that includes jQuery framework: The gallery initialization is placed to the end of […]<\/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\/1752"}],"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=1752"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1752\/revisions"}],"predecessor-version":[{"id":86205,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1752\/revisions\/86205"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}