juxtapose
1.0.9
[juxtaposejs] [https://juxtapose.knightlab.com]是一个简单的开源工具，用于创建图像滑块之前/之后。只需提供两个图像URL，并置将为您完成其余工作。以下是与HTML和JavaScript实现并置的说明，但我们也有一个工具，可让您在无需知道任何代码的情况下制作滑块。
如果您想对并置贡献，请查看DEVELOPERS.md文件以获取安装说明。分叉项目，创建一个具有您功能的新分支，然后提交拉动请求。感谢您的帮助！
创建并置滑块的最简单方法是转到[https://juxtapose.knightlab.com] [1]，并使用该工具生成可在任何网站上使用的嵌入式代码段。还有许多其他方法可以在您的网站上安装并置。
CDN - 并列可在骑士实验室CDN上使用。只需将此代码添加到HTML页面的<head> ：
< script src =" https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css " >软件包经理- NPM和Bower套餐注册处都可以使用。以下命令将分别将并置保存到您的软件包。JSON和BOWER.JSON要求文件。
npm install --save juxtaposejs
bower install --save juxtapose还有一个流星包。
创建并置滑块的最简单方法是转到[https://juxtapose.knightlab.com] [1]，并使用该工具生成可在任何网站上使用的嵌入式代码段。该工具易于使用，不需要任何编码知识。如果您想在不使用嵌入生成器的情况下使用juxtaposejs，请继续阅读以了解不同的实现方法。
实现图像滑块的最简单方法是将此代码添加到您的标记中：
< div class =" juxtapose " >
< img src =" https://example.com/firstimage.jpg " />
< img src =" https://example.com/secondimage.jpg " />
</ div >
< script src =" https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css " >每个img也可以采用其他属性：
< img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " />如果每个图像具有定义的data-label属性，则滑块将在每个图像上显示标签。如果每个图像具有定义的data-credit属性，则滑块将显示每个图像的信用。
滑块包装器还可以采用一些其他属性来指定一些选项：
< div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div >用data-startingposition指定起始位置，使您可以将用户的注意力集中在图像最明显的图像部分。为了分别切换标签的可见性和信用额度，将data-showlabels和data-showcredits设置为false。为了禁用动画，请将data-animate设置为false。
如果您在现有的响应式IFRAME解决方案（例如pym.js）中使用并置，并且不想使用Innebose的内置（但有失败的）响应式IFRAME解决方案，则可以将data-makeresponsive设置为false。
JXSlider类采用三个参数。首先，是要变成滑块的元素的ID字符串。第二是两个对象的数组。每个对象都必须定义src ，并且可以选择定义label和credit 。第三个参数允许您为图像滑块设置其他选项。
< div id = "foo" > < / div >
< script >
slider = new juxtapose . JXSlider ( '#foo' ,
[
{
src : 'https://example.com/firstimage.jpg' ,
label : '2009' ,
credit : 'Image Credit'
} ,
{
src : 'https://example.com/secondimage.jpg' ,
label : '2014' ,
credit : "Image Credit"
}
] ,
{
animate : true ,
showLabels : true ,
showCredits : true ,
startingPosition : "50%" ,
makeResponsive : true
} ) ;
< / script >您可以通过修改其CSS来自定义近路的外观。有关说明，请单击此处。
JXSLIDER类包含一些您可以用来修改滑块的方法。
如果您使用HTML方法实例化滑块，但仍希望以编程方式访问一个滑块，则juxtaposejs会在页面上创建一系列JXSliders，您可以与juxtapose.sliders访问。
JXSlider . updateSlider ( percentage , animate ) ;百分比表示您要在哪里设置手柄相对于滑块的左侧。如果将动画设置为true ，则手柄将动画到新位置；如果将动画设置为false ，则句柄将不会。
作为渲染并置实例的一部分，此库将“信用”作为HTML。并置直接从data-credit属性或任何一个图像的配置对象的credit属性传递。
从最严格的意义上讲，这暴露了XSS脆弱性。但是，我们认为，将股本置作为工具包中的工具，将任何HTML消毒作为集成商的责任既负责，也是最佳的，他们可能对合适的东西有自己的想法。因此，请注意：如果您提供一项服务来帮助人们创建并置实例，则应应对防止注射恶意代码的适当责任。
