Step #3
Copy this slider to your webflow project 😉
Static:
Copy and paste this Static Slider directly on Webflow
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6b6","tag":"div","classes":["e3b49fc5-045a-d41a-c0a3-01c1c4d90db0"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6b7"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6b7","tag":"div","classes":["f29e95d3-935a-540a-2db7-7399d42d540d"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6b8","d1ea68d4-91a1-900e-57fc-d5e6ecc8d6cf","d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d1","d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d7"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":"progress-bar-slider"},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6b8","tag":"div","classes":["81bb2e12-6b75-0f75-cb3c-b42d75305c27"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6b9"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6b9","tag":"ul","classes":["f6b819df-ded7-4eec-1aad-37216ef9a8f3"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6ba","aa047bd5-eae4-ad47-2a76-b5c8763d6b68","fc6a550e-893f-2ce6-15d7-dd6b41e16a63","16a10b40-9e48-1db1-752e-ac90038b8f97","028b0c2c-dfff-1732-bd6a-149e6fc486fc","568744ff-9dda-1a9d-6461-99eaf9e15bfc","001d74f7-6932-6d11-ab89-76266808e5cf"],"type":"List","data":{"tag":"ul","list":{"type":"list","unstyled":false},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6ba","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6bb"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6bb","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6bc"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6bc","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"src":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"62b931def1e18e99cc565e6a"},"search":{"exclude":false}}},{"_id":"aa047bd5-eae4-ad47-2a76-b5c8763d6b68","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["aa047bd5-eae4-ad47-2a76-b5c8763d6b69"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"aa047bd5-eae4-ad47-2a76-b5c8763d6b69","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["aa047bd5-eae4-ad47-2a76-b5c8763d6b6a"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"aa047bd5-eae4-ad47-2a76-b5c8763d6b6a","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"src":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"62b931def1e18e99cc565e6a"},"search":{"exclude":false}}},{"_id":"fc6a550e-893f-2ce6-15d7-dd6b41e16a63","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["fc6a550e-893f-2ce6-15d7-dd6b41e16a64"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fc6a550e-893f-2ce6-15d7-dd6b41e16a64","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["fc6a550e-893f-2ce6-15d7-dd6b41e16a65"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fc6a550e-893f-2ce6-15d7-dd6b41e16a65","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"src":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"62b931def1e18e99cc565e6a"},"search":{"exclude":false}}},{"_id":"16a10b40-9e48-1db1-752e-ac90038b8f97","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["16a10b40-9e48-1db1-752e-ac90038b8f98"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"16a10b40-9e48-1db1-752e-ac90038b8f98","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["16a10b40-9e48-1db1-752e-ac90038b8f99"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"16a10b40-9e48-1db1-752e-ac90038b8f99","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"src":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"62b931def1e18e99cc565e6a"},"search":{"exclude":false}}},{"_id":"028b0c2c-dfff-1732-bd6a-149e6fc486fc","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["028b0c2c-dfff-1732-bd6a-149e6fc486fd"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"028b0c2c-dfff-1732-bd6a-149e6fc486fd","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["028b0c2c-dfff-1732-bd6a-149e6fc486fe"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"028b0c2c-dfff-1732-bd6a-149e6fc486fe","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"src":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"62b931def1e18e99cc565e6a"},"search":{"exclude":false}}},{"_id":"568744ff-9dda-1a9d-6461-99eaf9e15bfc","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["568744ff-9dda-1a9d-6461-99eaf9e15bfd"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"568744ff-9dda-1a9d-6461-99eaf9e15bfd","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["568744ff-9dda-1a9d-6461-99eaf9e15bfe"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"568744ff-9dda-1a9d-6461-99eaf9e15bfe","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"src":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"62b931def1e18e99cc565e6a"},"search":{"exclude":false}}},{"_id":"001d74f7-6932-6d11-ab89-76266808e5cf","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["001d74f7-6932-6d11-ab89-76266808e5d0"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"001d74f7-6932-6d11-ab89-76266808e5d0","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["001d74f7-6932-6d11-ab89-76266808e5d1"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"001d74f7-6932-6d11-ab89-76266808e5d1","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"src":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"62b931def1e18e99cc565e6a"},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6cf","tag":"div","classes":["e88a8c23-6a1b-b6a6-f8d3-83002d302f75"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d0"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d0","tag":"div","classes":["212e9429-055c-b70a-86ca-09386c8663fb"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d1","tag":"div","classes":["81cd45f3-d22c-5aa8-a045-129137d4c632"],"children":["aad56a01-f24e-d8e3-2cfb-fcb8447fe41e"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"aad56a01-f24e-d8e3-2cfb-fcb8447fe41e","tag":"div","classes":["b18a0dec-e564-2c8e-314c-68d64268946c"],"children":["aad56a01-f24e-d8e3-2cfb-fcb8447fe41f","aad56a01-f24e-d8e3-2cfb-fcb8447fe421"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"aad56a01-f24e-d8e3-2cfb-fcb8447fe41f","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","b572ec37-14dd-5b89-cf06-8b10fdf4b598"],"children":["aad56a01-f24e-d8e3-2cfb-fcb8447fe420"],"type":"Link","data":{"search":{"exclude":false},"xattr":[{"name":"aria-label","value":"slider previous"}],"block":"inline","style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"attr":{"id":""},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"aad56a01-f24e-d8e3-2cfb-fcb8447fe420","tag":"div","classes":["6734f981-e645-351b-bbca-49f878c5aa38"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z\"/></svg>","type":"HtmlEmbed","data":{"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}},"insideRTE":false}},{"_id":"aad56a01-f24e-d8e3-2cfb-fcb8447fe421","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","a44399e7-2da1-69d0-5b0e-27b5b309998c"],"children":["aad56a01-f24e-d8e3-2cfb-fcb8447fe422"],"type":"Link","data":{"search":{"exclude":false},"xattr":[{"name":"aria-label","value":"next control"}],"block":"inline","style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"attr":{"id":""},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"aad56a01-f24e-d8e3-2cfb-fcb8447fe422","tag":"div","classes":["6734f981-e645-351b-bbca-49f878c5aa38"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z\"/></svg>","type":"HtmlEmbed","data":{"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}},"insideRTE":false}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d7","tag":"div","classes":["e348e028-04ab-4c93-f0ef-84ae438eb90d"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d8","d1ea68d4-91a1-900e-57fc-d5e6ecc8d6dd"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d8","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d9","d1ea68d4-91a1-900e-57fc-d5e6ecc8d6da"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6d9","tag":"div","classes":["fb1c02bc-32eb-d45e-5361-dbf0316ce13d","d94527c0-4f73-fa43-8d4e-3a2fa7097e25"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6da","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6db"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6db","tag":"div","classes":[],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6dc"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6dc","text":true,"v":"Inactive-State"},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6dd","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6de","d1ea68d4-91a1-900e-57fc-d5e6ecc8d6df"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6de","tag":"div","classes":["fb1c02bc-32eb-d45e-5361-dbf0316ce13d","d94527c0-4f73-fa43-8d4e-3a2fa7097e25","2e5b14b8-1b00-39a9-95a9-ca93855be244"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6df","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6e0"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6e0","tag":"div","classes":[],"children":["d1ea68d4-91a1-900e-57fc-d5e6ecc8d6e1"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""},"search":{"exclude":false}}},{"_id":"d1ea68d4-91a1-900e-57fc-d5e6ecc8d6e1","text":true,"v":"Active State"}],"styles":[{"_id":"2e5b14b8-1b00-39a9-95a9-ca93855be244","fake":false,"type":"class","name":"is-active","namespace":"","comb":"&","styleLess":"border-top-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); border-right-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); border-bottom-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); border-left-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); background-color: #1ea462; box-shadow: inset 0 0 0 2px #1ea462;","variants":{},"children":[],"selector":null},{"_id":"81bb2e12-6b75-0f75-cb3c-b42d75305c27","fake":false,"type":"class","name":"splide__track","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; height: auto; margin-bottom: 0px;","variants":{},"children":[],"selector":null},{"_id":"212e9429-055c-b70a-86ca-09386c8663fb","fake":false,"type":"class","name":"splide__progress__bar","namespace":"","comb":"","styleLess":"width: 0px; height: 3px; background-color: #1ea462; transition-property: width; transition-duration: 800ms; transition-timing-function: cubic-bezier(.22,.48,.23,.92);","variants":{},"children":[],"selector":null},{"_id":"fb1c02bc-32eb-d45e-5361-dbf0316ce13d","fake":false,"type":"class","name":"splide__pagination__page","namespace":"","comb":"","styleLess":"width: 10px; height: 2px; margin-right: 2px; margin-left: 2px; background-color: hsla(161.99999999999997, 10.87%, 18.04%, 0.60);","variants":{},"children":["46c394b8-d6d7-bf54-e653-22f9840c651b","d94527c0-4f73-fa43-8d4e-3a2fa7097e25","6fb6d68e-3b35-2826-b8ac-a8d95ae1d445"],"selector":null},{"_id":"e2a89b02-6431-94db-cbcf-09674970f8d7","fake":false,"type":"class","name":"margin-top","namespace":"","comb":"","styleLess":"","variants":{},"children":["cfe51c99-fd7f-d436-29be-cd140b2d12a6","dc3d0e4d-d85a-da91-7fc0-05ab59c7e48b","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"selector":null},{"_id":"1a16a50b-a828-6200-57d5-78f44fa2857a","fake":false,"type":"class","name":"slider-dots-wrapper","namespace":"","comb":"","styleLess":"display: flex; padding-top: 2rem; padding-right: 2rem; padding-bottom: 2rem; padding-left: 2rem; flex-direction: column; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 500;","variants":{},"children":[],"selector":null},{"_id":"6734f981-e645-351b-bbca-49f878c5aa38","fake":false,"type":"class","name":"icon-24x24","namespace":"","comb":"","styleLess":"width: 24px; height: 24px; justify-content: center; align-items: center;","variants":{},"children":["e8632d04-fca6-1863-bf7d-6f4be01e1630","23759a16-091c-00f0-57c9-3446fb951eff"],"selector":null},{"_id":"e3b49fc5-045a-d41a-c0a3-01c1c4d90db0","fake":false,"type":"class","name":"slider_component","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"b572ec37-14dd-5b89-cf06-8b10fdf4b598","fake":false,"type":"class","name":"splide__arrow--prev","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"26c55458-979a-c2d1-480a-42570a5f91f9","fake":false,"type":"class","name":"slide_image-cover","namespace":"","comb":"","styleLess":"width: 100%; height: 100%; object-fit: cover;","variants":{},"children":[],"selector":null},{"_id":"b18a0dec-e564-2c8e-314c-68d64268946c","fake":false,"type":"class","name":"splide__arrows-wrapper","namespace":"","comb":"","styleLess":"display: grid; grid-auto-columns: 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr 1fr; grid-template-rows: auto;","variants":{},"children":[],"selector":null},{"_id":"e88a8c23-6a1b-b6a6-f8d3-83002d302f75","fake":false,"type":"class","name":"splide__progress","namespace":"","comb":"","styleLess":"margin-top: 2rem; background-color: hsla(160, 5.50%, 42.75%, 0.60);","variants":{},"children":[],"selector":null},{"_id":"f6b819df-ded7-4eec-1aad-37216ef9a8f3","fake":false,"type":"class","name":"splide__list","namespace":"","comb":"","styleLess":"position: relative; z-index: 9; display: flex; height: auto; margin-bottom: 0px; padding-left: 0px; list-style-type: none;","variants":{},"children":[],"selector":null},{"_id":"d94527c0-4f73-fa43-8d4e-3a2fa7097e25","fake":false,"type":"class","name":"is-outlined","namespace":"","comb":"&","styleLess":"display: flex; width: 12px; height: 12px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; background-color: transparent; box-shadow: inset 0 0 0 2px hsla(160, 5.50%, 42.75%, 0.60);","variants":{},"children":["2e5b14b8-1b00-39a9-95a9-ca93855be244"],"selector":null},{"_id":"81cd45f3-d22c-5aa8-a045-129137d4c632","fake":false,"type":"class","name":"splide__arrows","namespace":"","comb":"","styleLess":"display: flex; padding-top: 2rem; padding-bottom: 0rem; justify-content: flex-end;","variants":{},"children":["56ca2267-0ea9-2a37-4934-56910cd647ff"],"selector":null},{"_id":"f29e95d3-935a-540a-2db7-7399d42d540d","fake":false,"type":"class","name":"splide","namespace":"","comb":"","styleLess":"position: relative;","variants":{},"children":[],"selector":null},{"_id":"e348e028-04ab-4c93-f0ef-84ae438eb90d","fake":false,"type":"class","name":"slider-styles","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"selector":null},{"_id":"5574e9b1-9f77-f5af-9ac9-b2a8428813e7","fake":false,"type":"class","name":"splide__slide__container","namespace":"","comb":"","styleLess":"width: 100%; height: 33rem; transition-property: transform; transition-duration: 200ms; transition-timing-function: ease;","variants":{"tiny":{"styleLess":"height: 17rem;"}},"children":[],"selector":null},{"_id":"c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857","fake":false,"type":"class","name":"splide__slide","namespace":"","comb":"","styleLess":"overflow: hidden; width: 20rem; margin-right: 1rem; margin-left: 1rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-left-radius: 2.25rem; border-top-right-radius: 2.25rem; border-bottom-left-radius: 2.25rem; border-bottom-right-radius: 2.25rem; transition-property: transform; transition-duration: 200ms; transition-timing-function: ease;","variants":{"tiny":{"styleLess":"width: 100%;"}},"children":[],"selector":null},{"_id":"a44399e7-2da1-69d0-5b0e-27b5b309998c","fake":false,"type":"class","name":"splide__arrow--next","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"ca9d1cd7-f24f-358b-6de9-2b1885b9681f","fake":false,"type":"class","name":"margin-xxsmal","namespace":"","comb":"&","styleLess":"margin-top: 1rem;","variants":{},"children":[],"selector":null},{"_id":"6d55aa96-a913-06c2-7b5a-32d7fe475547","fake":false,"type":"class","name":"splide__arrow","namespace":"","comb":"","styleLess":"display: flex; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; justify-content: flex-end; border-top-left-radius: 50rem; border-top-right-radius: 50rem; border-bottom-left-radius: 50rem; border-bottom-right-radius: 50rem; background-color: hsla(0, 0.00%, 100.00%, 1.00); transition-property: height, width; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: #293330;","variants":{"main_hover":{"styleLess":"box-shadow: 1px 1px 16px 0 hsla(0, 0.00%, 0.00%, 0.07); color: #1ea462;"}},"children":["b572ec37-14dd-5b89-cf06-8b10fdf4b598","a44399e7-2da1-69d0-5b0e-27b5b309998c"],"selector":null}],"assets":[{"cdnUrl":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","siteId":"6255e2b705e466285eb291ad","width":140,"isHD":false,"height":140,"fileName":"62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","createdOn":"2022-06-27T04:28:14.855Z","origFileName":"placeholder.60f9b1840c.svg","alt":"Placeholder Image","fileHash":"60f9b1840cfc6c3f5134c83afba340ec","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","thumbUrl":"https://assets.website-files.com/6255e2b705e466285eb291ad/62b931def1e18e99cc565e6a_placeholder.60f9b1840c.svg","_id":"62b931def1e18e99cc565e6a","updatedOn":"2022-06-27T04:28:14.855Z","fileSize":403}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Copy this example
CMS / Ecommerce ready
Copy and paste this CMS Ready Slider directly on Webflow
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"a8847004-2a3d-3cd8-243c-5dd96226e402","tag":"div","classes":["e3b49fc5-045a-d41a-c0a3-01c1c4d90db0"],"children":["754fc96d-1baa-fc97-f3b3-be67442b8920"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"754fc96d-1baa-fc97-f3b3-be67442b8920","tag":"div","classes":["f29e95d3-935a-540a-2db7-7399d42d540d"],"children":["4daa626c-c6ce-1ede-8fe2-228d6a64fe7f","60b11a74-640c-3393-c2d5-d10d92954b7d","b45af34c-13e7-db8f-acbc-fa77eff6eba7","fb875621-5c6a-7de9-d940-6ea4143bf7c6"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":"progress-bar-slider"},"search":{"exclude":false}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe7f","tag":"div","classes":["81bb2e12-6b75-0f75-cb3c-b42d75305c27"],"children":["4daa626c-c6ce-1ede-8fe2-228d6a64fe80","4daa626c-c6ce-1ede-8fe2-228d6a64fe82"],"type":"DynamoWrapper","data":{"tag":"div","dyn":{"type":"wrapper"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe80","tag":"div","classes":["f6b819df-ded7-4eec-1aad-37216ef9a8f3"],"children":["4daa626c-c6ce-1ede-8fe2-228d6a64fe81"],"type":"DynamoList","data":{"tag":"div","dyn":{"type":"list"},"attr":{"id":"scale-slider"},"search":{"exclude":false}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe81","tag":"div","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["3109ab4b-81d1-db02-d32d-868db234cb21"],"type":"DynamoItem","data":{"dyn":{"type":"item","grid":12},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"3109ab4b-81d1-db02-d32d-868db234cb21","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["3109ab4b-81d1-db02-d32d-868db234cb22"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"3109ab4b-81d1-db02-d32d-868db234cb22","tag":"img","classes":["26c55458-979a-c2d1-480a-42570a5f91f9"],"children":[],"type":"Image","data":{"attr":{"height":"auto","loading":"lazy","width":"auto","src":"https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg","id":""},"img":{"sizes":[{"max":10000,"size":"320px"}],"id":"plugins/Basic/assets/placeholder.svg"},"dyn":{"bind":{}},"search":{"exclude":false}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe82","tag":"div","classes":[],"children":["4daa626c-c6ce-1ede-8fe2-228d6a64fe83"],"type":"DynamoEmpty","data":{"tag":"div","dyn":{"type":"empty"},"attr":{"id":""},"search":{"exclude":false}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe83","tag":"div","classes":[],"children":["4daa626c-c6ce-1ede-8fe2-228d6a64fe84"],"type":"Block","data":{"tag":"div","text":true,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe84","text":true,"v":"No items found."},{"_id":"60b11a74-640c-3393-c2d5-d10d92954b7d","tag":"div","classes":["e88a8c23-6a1b-b6a6-f8d3-83002d302f75"],"children":["60b11a74-640c-3393-c2d5-d10d92954b7e"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"60b11a74-640c-3393-c2d5-d10d92954b7e","tag":"div","classes":["212e9429-055c-b70a-86ca-09386c8663fb"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"b45af34c-13e7-db8f-acbc-fa77eff6eba7","tag":"div","classes":["81cd45f3-d22c-5aa8-a045-129137d4c632"],"children":["c66816c5-cbe9-ed0e-7c5c-70bdf0b68480"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"c66816c5-cbe9-ed0e-7c5c-70bdf0b68480","tag":"div","classes":["b18a0dec-e564-2c8e-314c-68d64268946c"],"children":["c66816c5-cbe9-ed0e-7c5c-70bdf0b68481","c66816c5-cbe9-ed0e-7c5c-70bdf0b68483"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"c66816c5-cbe9-ed0e-7c5c-70bdf0b68481","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","b572ec37-14dd-5b89-cf06-8b10fdf4b598"],"children":["c66816c5-cbe9-ed0e-7c5c-70bdf0b68482"],"type":"Link","data":{"search":{"exclude":false},"xattr":[{"name":"aria-label","value":"slider previous"}],"block":"inline","style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"attr":{"id":""},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"c66816c5-cbe9-ed0e-7c5c-70bdf0b68482","tag":"div","classes":["6734f981-e645-351b-bbca-49f878c5aa38"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z\"/></svg>","type":"HtmlEmbed","data":{"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}},"insideRTE":false}},{"_id":"c66816c5-cbe9-ed0e-7c5c-70bdf0b68483","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","a44399e7-2da1-69d0-5b0e-27b5b309998c"],"children":["c66816c5-cbe9-ed0e-7c5c-70bdf0b68484"],"type":"Link","data":{"search":{"exclude":false},"xattr":[{"name":"aria-label","value":"next control"}],"block":"inline","style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"attr":{"id":""},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"c66816c5-cbe9-ed0e-7c5c-70bdf0b68484","tag":"div","classes":["6734f981-e645-351b-bbca-49f878c5aa38"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z\"/></svg>","type":"HtmlEmbed","data":{"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"/><path fill=\"currentcolor\" d=\"M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}},"insideRTE":false}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7c6","tag":"div","classes":["e348e028-04ab-4c93-f0ef-84ae438eb90d"],"children":["fb875621-5c6a-7de9-d940-6ea4143bf7c7","fb875621-5c6a-7de9-d940-6ea4143bf7cc"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7c7","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["fb875621-5c6a-7de9-d940-6ea4143bf7c8","fb875621-5c6a-7de9-d940-6ea4143bf7c9"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7c8","tag":"div","classes":["fb1c02bc-32eb-d45e-5361-dbf0316ce13d","d94527c0-4f73-fa43-8d4e-3a2fa7097e25"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7c9","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["fb875621-5c6a-7de9-d940-6ea4143bf7ca"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7ca","tag":"div","classes":[],"children":["fb875621-5c6a-7de9-d940-6ea4143bf7cb"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7cb","text":true,"v":"Inactive-State"},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7cc","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["fb875621-5c6a-7de9-d940-6ea4143bf7cd","fb875621-5c6a-7de9-d940-6ea4143bf7ce"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7cd","tag":"div","classes":["fb1c02bc-32eb-d45e-5361-dbf0316ce13d","d94527c0-4f73-fa43-8d4e-3a2fa7097e25","2e5b14b8-1b00-39a9-95a9-ca93855be244"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7ce","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["fb875621-5c6a-7de9-d940-6ea4143bf7cf"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7cf","tag":"div","classes":[],"children":["fb875621-5c6a-7de9-d940-6ea4143bf7d0"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""},"search":{"exclude":false}}},{"_id":"fb875621-5c6a-7de9-d940-6ea4143bf7d0","text":true,"v":"Active State"}],"styles":[{"_id":"2e5b14b8-1b00-39a9-95a9-ca93855be244","fake":false,"type":"class","name":"is-active","namespace":"","comb":"&","styleLess":"border-top-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); border-right-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); border-bottom-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); border-left-color: hsla(73.64806866952789, 100.00%, 45.69%, 1.00); background-color: #1ea462; box-shadow: inset 0 0 0 2px #1ea462;","variants":{},"children":[],"selector":null},{"_id":"81bb2e12-6b75-0f75-cb3c-b42d75305c27","fake":false,"type":"class","name":"splide__track","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; height: auto; margin-bottom: 0px;","variants":{},"children":[],"selector":null},{"_id":"212e9429-055c-b70a-86ca-09386c8663fb","fake":false,"type":"class","name":"splide__progress__bar","namespace":"","comb":"","styleLess":"width: 0px; height: 3px; background-color: #1ea462; transition-property: width; transition-duration: 800ms; transition-timing-function: cubic-bezier(.22,.48,.23,.92);","variants":{},"children":[],"selector":null},{"_id":"fb1c02bc-32eb-d45e-5361-dbf0316ce13d","fake":false,"type":"class","name":"splide__pagination__page","namespace":"","comb":"","styleLess":"width: 10px; height: 2px; margin-right: 2px; margin-left: 2px; background-color: hsla(161.99999999999997, 10.87%, 18.04%, 0.60);","variants":{},"children":["46c394b8-d6d7-bf54-e653-22f9840c651b","d94527c0-4f73-fa43-8d4e-3a2fa7097e25","6fb6d68e-3b35-2826-b8ac-a8d95ae1d445"],"selector":null},{"_id":"e2a89b02-6431-94db-cbcf-09674970f8d7","fake":false,"type":"class","name":"margin-top","namespace":"","comb":"","styleLess":"","variants":{},"children":["cfe51c99-fd7f-d436-29be-cd140b2d12a6","dc3d0e4d-d85a-da91-7fc0-05ab59c7e48b","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"selector":null},{"_id":"1a16a50b-a828-6200-57d5-78f44fa2857a","fake":false,"type":"class","name":"slider-dots-wrapper","namespace":"","comb":"","styleLess":"display: flex; padding-top: 2rem; padding-right: 2rem; padding-bottom: 2rem; padding-left: 2rem; flex-direction: column; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 500;","variants":{},"children":[],"selector":null},{"_id":"6734f981-e645-351b-bbca-49f878c5aa38","fake":false,"type":"class","name":"icon-24x24","namespace":"","comb":"","styleLess":"width: 24px; height: 24px; justify-content: center; align-items: center;","variants":{},"children":["e8632d04-fca6-1863-bf7d-6f4be01e1630","23759a16-091c-00f0-57c9-3446fb951eff"],"selector":null},{"_id":"e3b49fc5-045a-d41a-c0a3-01c1c4d90db0","fake":false,"type":"class","name":"slider_component","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"b572ec37-14dd-5b89-cf06-8b10fdf4b598","fake":false,"type":"class","name":"splide__arrow--prev","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"26c55458-979a-c2d1-480a-42570a5f91f9","fake":false,"type":"class","name":"slide_image-cover","namespace":"","comb":"","styleLess":"width: 100%; height: 100%; object-fit: cover;","variants":{},"children":[],"selector":null},{"_id":"b18a0dec-e564-2c8e-314c-68d64268946c","fake":false,"type":"class","name":"splide__arrows-wrapper","namespace":"","comb":"","styleLess":"display: grid; grid-auto-columns: 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr 1fr; grid-template-rows: auto;","variants":{},"children":[],"selector":null},{"_id":"e88a8c23-6a1b-b6a6-f8d3-83002d302f75","fake":false,"type":"class","name":"splide__progress","namespace":"","comb":"","styleLess":"margin-top: 2rem; background-color: hsla(160, 5.50%, 42.75%, 0.60);","variants":{},"children":[],"selector":null},{"_id":"f6b819df-ded7-4eec-1aad-37216ef9a8f3","fake":false,"type":"class","name":"splide__list","namespace":"","comb":"","styleLess":"position: relative; z-index: 9; display: flex; height: auto; margin-bottom: 0px; padding-left: 0px; list-style-type: none;","variants":{},"children":[],"selector":null},{"_id":"d94527c0-4f73-fa43-8d4e-3a2fa7097e25","fake":false,"type":"class","name":"is-outlined","namespace":"","comb":"&","styleLess":"display: flex; width: 12px; height: 12px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; background-color: transparent; box-shadow: inset 0 0 0 2px hsla(160, 5.50%, 42.75%, 0.60);","variants":{},"children":["2e5b14b8-1b00-39a9-95a9-ca93855be244"],"selector":null},{"_id":"81cd45f3-d22c-5aa8-a045-129137d4c632","fake":false,"type":"class","name":"splide__arrows","namespace":"","comb":"","styleLess":"display: flex; padding-top: 2rem; padding-bottom: 0rem; justify-content: flex-end;","variants":{},"children":["56ca2267-0ea9-2a37-4934-56910cd647ff"],"selector":null},{"_id":"f29e95d3-935a-540a-2db7-7399d42d540d","fake":false,"type":"class","name":"splide","namespace":"","comb":"","styleLess":"position: relative;","variants":{},"children":[],"selector":null},{"_id":"e348e028-04ab-4c93-f0ef-84ae438eb90d","fake":false,"type":"class","name":"slider-styles","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"selector":null},{"_id":"5574e9b1-9f77-f5af-9ac9-b2a8428813e7","fake":false,"type":"class","name":"splide__slide__container","namespace":"","comb":"","styleLess":"width: 100%; height: 33rem; transition-property: transform; transition-duration: 200ms; transition-timing-function: ease;","variants":{"tiny":{"styleLess":"height: 17rem;"}},"children":[],"selector":null},{"_id":"c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857","fake":false,"type":"class","name":"splide__slide","namespace":"","comb":"","styleLess":"overflow: hidden; width: 20rem; margin-right: 1rem; margin-left: 1rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-left-radius: 2.25rem; border-top-right-radius: 2.25rem; border-bottom-left-radius: 2.25rem; border-bottom-right-radius: 2.25rem; transition-property: transform; transition-duration: 200ms; transition-timing-function: ease;","variants":{"tiny":{"styleLess":"width: 100%;"}},"children":[],"selector":null},{"_id":"a44399e7-2da1-69d0-5b0e-27b5b309998c","fake":false,"type":"class","name":"splide__arrow--next","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"ca9d1cd7-f24f-358b-6de9-2b1885b9681f","fake":false,"type":"class","name":"margin-xxsmal","namespace":"","comb":"&","styleLess":"margin-top: 1rem;","variants":{},"children":[],"selector":null},{"_id":"6d55aa96-a913-06c2-7b5a-32d7fe475547","fake":false,"type":"class","name":"splide__arrow","namespace":"","comb":"","styleLess":"display: flex; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; justify-content: flex-end; border-top-left-radius: 50rem; border-top-right-radius: 50rem; border-bottom-left-radius: 50rem; border-bottom-right-radius: 50rem; background-color: hsla(0, 0.00%, 100.00%, 1.00); transition-property: height, width; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: #293330;","variants":{"main_hover":{"styleLess":"box-shadow: 1px 1px 16px 0 hsla(0, 0.00%, 0.00%, 0.07); color: #1ea462;"}},"children":["b572ec37-14dd-5b89-cf06-8b10fdf4b598","a44399e7-2da1-69d0-5b0e-27b5b309998c"],"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":1}}
Copy this example
Step #4 (Optional)
Below is a list of attributes and options that are used to create this slider functionality.
If you are a person who understand by watching video's then we got you covered goto next step.
- typeIf you dont want the slider to be looping around then you can remove that attribute from the code.'slide'A carousel with the slide transition'loop'A carousel with infinite slides'fade'A carousel with the fade transition. This does not support the perPage option
- perPageDetermines the number of slides to display in a page. You can adjust these based on each screen width/breakpoint.
- perMoveDetermines the number of slides to move at once
- gapThe gap between slides. The CSS format is acceptable (px, rem, % and etc)
- paddingSets padding left/right or top/bottom of the carousel. The CSS format is acceptable.
This is especially used to create the effect where last slide is peaking out a little bit. - focusDetermines which slide should be active if the carousel has multiple slides in a page.
- paginationDetermines whether to create pagination (indicator dots) or not
- speedThe transition speed in milliseconds. If 0, the carousel immediately jumps to the target slide.
- easingThe timing function for the CSS transition, such as linear, ease or cubic-bezier().
The best and easiest way is to copy this value from Webflow (Any Transition ease value you want.) - classesThis attribute is an object and is used to define custom elements for slider-arrows, pagination-dots and etc..
- If you are using custom arrows and pagination element as in this example please make sure that you add the classes as below.classes: {
// Add classes for arrows.
arrows: 'splide__arrows your-class-arrows',
arrow : 'splide__arrow your-class-arrow',
prev : 'splide__arrow--prev your-class-prev',
next : 'splide__arrow--next your-class-next',
// Add classes for pagination.
pagination: 'splide__pagination your-class-pagination', // container
page : 'splide__pagination__page your-class-page', // each button
}, - breakpointsThis attribute is to make adjustments to other breakpoints if you want. You can adjust how many slides should be visible on the mobile and etc...
We have used the Webflow breakpoints in the code so that its easy for you to understand.
This example reduces the number of slides under : 640px {This property act as max-width in css media queries.}{
perPage: 4,
breakpoints: {
640: {
perPage: 2,
},
}
}
padding: 10
// By the CSS format
padding: '1rem'
// Specifies each value for a horizontal carousel
padding: { left: 10, right: 20 }
padding: { left: '1rem', right: '2rem' }
// Specifies each value for a vertical carousel
padding: { top: 10, bottom: 20 }