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消毒作為集成商的責任既負責，也是最佳的，他們可能對合適的東西有自己的想法。因此，請注意：如果您提供一項服務來幫助人們創建並置實例，則應應對防止注射惡意代碼的適當責任。
