{"id":1754,"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\/article10.html"},"modified":"2020-02-03T03:43:24","modified_gmt":"2020-02-03T08:43:24","slug":"coin-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/coin-slider.html","title":{"rendered":"“Coin” Slider"},"content":{"rendered":"This is a Slider Script that can automatically cut images for creating various transition effects. You can find full installation and configuration instructions by following this link<\/a>.

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

  The <head><\/span> section of the index-#.html<\/span> file contains these lines of code that initialize the script functionality with basic values:

This script is initialized with a <div><\/span> element with the #coin-slider<\/span> id. Script attributes define the following values:

\u2022    width: 565<\/span> – width of slider panel;
\u2022    height: 290<\/span> – height of slider panel;
\u2022    spw: 7<\/span> – squares per width;
\u2022    sph: 5<\/span> – squares per height;
\u2022    delay: 3000<\/span> – delay between images in ms;
\u2022    sDelay: 30<\/span> – delay between squares in ms;
\u2022    opacity: 0.7<\/span> – opacity of title and navigation;
\u2022    titleSpeed: 500<\/span> – speed of title appearance in ms;
\u2022    effect: ‘ ‘<\/span> – transition effect, random<\/span> by default (random, swirl, rain, straight<\/span>);
\u2022    navigation: true<\/span> – prev\/next<\/span> and buttons;
\u2022    links : true<\/span> – show images as links;
\u2022    hoverPause: true<\/span> – pause on hover.

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

Each slide is an image (<img><\/span> tag), placed into a link (<a><\/span> tag). You can also add a slide description using the <span><\/span> element. In order to add a slide you will need to add the following structure:

CSS<\/span>
You can find script related stylesheet in the main style.css<\/span> file. You will need to modify the following styles:

","protected":false},"excerpt":{"rendered":"

This is a Slider Script that can automatically cut images for creating various transition effects. You can find full installation and configuration instructions by following this link. JavaScript In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include the coin-slider.js script […]<\/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\/1754"}],"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=1754"}],"version-history":[{"count":6,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1754\/revisions"}],"predecessor-version":[{"id":86216,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1754\/revisions\/86216"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}