This is a Slider Script that allows you to show two images in a single container and drag one image over another which is good for \u201cbefore-after\u201d comparison.<\/p>
This plug-in has several important advantages:
\u2022 Low file size (only 7 Kbytes);
\u2022 You can use it many times on the same page;
\u2022 When JavaScript is disabled you will not lose a container, it will just show the first image.<\/p>
JavaScript The <head><\/strong> section of the index-#.html<\/strong> file contains these lines of code that initialize the script functionality with basic values:<\/p> If you want to set specific attributes for the slider you will need to define them when you initialize the plug-in.<\/p> <\/p> Here the script attributes define the following values: HTML<\/strong> CSS<\/strong> Make sure to set overflow: hidden;<\/strong> for #container<\/strong> id.<\/p>","protected":false},"excerpt":{"rendered":" This is a Slider Script that allows you to show two images in a single container and drag one image over another which is good for \u201cbefore-after\u201d comparison. This plug-in has several important advantages: \u2022 Low file size (only 7 Kbytes); \u2022 You can use it many times on the same page; \u2022 When JavaScript is disabled you […]<\/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\/1747"}],"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=1747"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1747\/revisions"}],"predecessor-version":[{"id":86236,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1747\/revisions\/86236"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/strong> In order to make the script work, the index-#.html<\/strong> file with a slider should contain these lines of HTML code:<\/p>
\u2022 animateIntro<\/strong> – if this attribute is set to true, the slider will slowly move (false<\/strong> by default);
\u2022 introDelay: 2000<\/strong> – if animateIntro<\/strong> is set to true<\/strong>, this attribute defines a delay before the animation starts;
\u2022 introDuration: 500<\/strong> – if animateIntro<\/strong> is set to true<\/strong>, this attribute defines total animation time;
\u2022 showFullLinks: false<\/strong> – defines whether to show the links that allow to see full images (“before” or “after”) at once.<\/p>
In order to create a slider you will need to define two images that have fixed width and height.
Below you can see the HTML script representation:<\/p>
You can find script related stylesheet in the main style.css<\/strong> file. You will need to modify the following styles:<\/p>