“之后”滑块

这是一个 Slider Script 这允许您在单个容器中显示两个图像，并将一个图像拖到另一个图像上，这有利于“前后”比较.

这个插件有几个重要的优点:
•低文件大小(仅7 kb);
•你可以在同一个页面上多次使用它;
• When JavaScript 是禁用你不会失去一个容器，它只会显示第一个图像吗.

JavaScript
为了使 script 工作, index-#.html 用一个 slider 应该包含这几行 HTML code:

The 部分 index-#.html 文件包含以下代码行，这些代码行用于初始化 script 具有基本价值的功能:

属性的特定属性 slider 您需要在初始化插件时定义它们.

Here the script 属性定义了以下值:
•  animateIntro -如果此属性设置为true，则 slider 会慢慢移动(false 默认情况下);
•  introDelay: 2000 – if animateIntro 设为 true，此属性定义动画开始前的延迟;
•  introDuration: 500 – if animateIntro 设为 true，此属性定义了总动画时间;
•  showFullLinks:假 -定义是否显示链接，允许看到完整的图像(“之前”或“之后”)一次.

HTML
为了创建一个 slider 您需要定义两个具有固定宽度和高度的图像.
下面你可以看到 HTML script 表示:

CSS
你可以找到 script related 样式表 大体上 style.css file. 你需要修改以下样式:

一定要设置 溢出:隐藏; for #容器 id.