• Balloon at Mountain
  • Gas Bolloon
  • Moon on Sky
  • Allot of Gas Balloons on the sky
  • Bird Flying
  • Orange Sky
  • Dusk Sky
    Inactive-State
    Active State

    Slides will have fixed- width and it will maintain that size without shrinking or Scaling. It give you full control over the layout shift.

    Step #1

    Copy the following code in <head> tag of page settings

    Click to copy!
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.1/dist/css/splide-core.min.css">
    Step #2

    Copy the following code and place at before </body> tag in page settings

    
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.1/dist/js/splide.min.js"></script>
    
    <script>
      document.addEventListener( 'DOMContentLoaded', function() {
    
        var centeredSlider = new Splide( '.splide', {
    
          type   : 'loop',
          perMove: 1,
          perPage: 3,
          focus: 'center',
          gap: '4%',
          speed: 800,
          easing: 'cubic-bezier(.22,.48,.23,.92)',
          pagination: true,
          breakpoints: {
    
            // Webflow Max Width { 768px-990px }
            991: {
    					padding: {right: '10%'},
              perPage: 1
            },
            // Webflow Max Width { 478px - 767px }
            767: {
              padding: {right: '10%'},
              perPage: 1
            },
    
            // Webflow Max Width { 0 - 476px }
            477: {
              padding: {right: '10%'},
              perPage: 1
            },
    
          },
          classes: {
            prev  : 'splide__arrow--prev',
            next  : 'splide__arrow--next',
            pagination: 'splide__pagination',
            page: 'splide__pagination__page is-outlined',
          },
        });
    
        centeredSlider.mount();
    
      });
    </script>
    
     <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.1/dist/js/splide.min.js"></script>
    
    <script>
     document.addEventListener( 'DOMContentLoaded', function() {
    
        var centeredSlider = new Splide( '.splide', {
    
          type   : 'loop',
          perMove: 1,
          perPage: 3,
          focus: 'center',
          gap: '4%',
          speed: 800,
          easing: 'cubic-bezier(.22,.48,.23,.92)',
          pagination: true,
          breakpoints: {
    
            // Webflow Max Width { 768px-990px }
            991: {
    					padding: {right: '10%'},
              perPage: 1
            },
            // Webflow Max Width { 478px - 767px }
            767: {
              padding: {right: '10%'},
              perPage: 1
            },
    
            // Webflow Max Width { 0 - 476px }
            477: {
              padding: {right: '10%'},
              perPage: 1
            },
    
          },
          classes: {
            prev  : 'splide__arrow--prev',
            next  : 'splide__arrow--next',
            pagination: 'splide__pagination',
            page: 'splide__pagination__page is-outlined',
          },
        });
    
        centeredSlider.mount();
    
      });
    </script>
      
      
    Click to copy!
    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":"5644fd03-802f-4723-19f1-812df067fc04","tag":"div","classes":["e3b49fc5-045a-d41a-c0a3-01c1c4d90db0"],"children":["5644fd03-802f-4723-19f1-812df067fc05","5644fd03-802f-4723-19f1-812df067fc25"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc05","tag":"div","classes":["f29e95d3-935a-540a-2db7-7399d42d540d"],"children":["5644fd03-802f-4723-19f1-812df067fc06","5644fd03-802f-4723-19f1-812df067fc1d"],"type":"Block","data":{"tag":"div","xattr":[{"name":"aria-label","value":"Basic Slider 001"}],"text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc06","tag":"div","classes":["81bb2e12-6b75-0f75-cb3c-b42d75305c27"],"children":["5644fd03-802f-4723-19f1-812df067fc07"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc07","tag":"ul","classes":["f6b819df-ded7-4eec-1aad-37216ef9a8f3"],"children":["5644fd03-802f-4723-19f1-812df067fc1a","fc434f8d-215e-f762-6441-3c2dca547e94","46482340-38f3-0dfe-51de-c21be0bab1cc","58b74e3e-5647-751c-e0be-7f965145df7c","72a199d6-820d-fed6-1ab0-f3983f6b2bf8","3119f450-c28c-e5c5-1b79-f2bd9d6e132e","ef87654d-3f71-70ea-bc98-1818f8c7be0d"],"type":"List","data":{"tag":"ul","list":{"type":"list","unstyled":true},"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc1a","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["5644fd03-802f-4723-19f1-812df067fc1b"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc1b","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["85506678-707e-ee67-7fca-a262c3a0afba"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"85506678-707e-ee67-7fca-a262c3a0afba","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"}}},{"_id":"fc434f8d-215e-f762-6441-3c2dca547e94","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["fc434f8d-215e-f762-6441-3c2dca547e95"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""}}},{"_id":"fc434f8d-215e-f762-6441-3c2dca547e95","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["fc434f8d-215e-f762-6441-3c2dca547e96"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"fc434f8d-215e-f762-6441-3c2dca547e96","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"}}},{"_id":"46482340-38f3-0dfe-51de-c21be0bab1cc","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["46482340-38f3-0dfe-51de-c21be0bab1cd"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""}}},{"_id":"46482340-38f3-0dfe-51de-c21be0bab1cd","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["46482340-38f3-0dfe-51de-c21be0bab1ce"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"46482340-38f3-0dfe-51de-c21be0bab1ce","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"}}},{"_id":"58b74e3e-5647-751c-e0be-7f965145df7c","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["58b74e3e-5647-751c-e0be-7f965145df7d"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""}}},{"_id":"58b74e3e-5647-751c-e0be-7f965145df7d","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["58b74e3e-5647-751c-e0be-7f965145df7e"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"58b74e3e-5647-751c-e0be-7f965145df7e","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"}}},{"_id":"72a199d6-820d-fed6-1ab0-f3983f6b2bf8","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["72a199d6-820d-fed6-1ab0-f3983f6b2bf9"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""}}},{"_id":"72a199d6-820d-fed6-1ab0-f3983f6b2bf9","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["72a199d6-820d-fed6-1ab0-f3983f6b2bfa"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"72a199d6-820d-fed6-1ab0-f3983f6b2bfa","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"}}},{"_id":"3119f450-c28c-e5c5-1b79-f2bd9d6e132e","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["3119f450-c28c-e5c5-1b79-f2bd9d6e132f"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""}}},{"_id":"3119f450-c28c-e5c5-1b79-f2bd9d6e132f","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["3119f450-c28c-e5c5-1b79-f2bd9d6e1330"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"3119f450-c28c-e5c5-1b79-f2bd9d6e1330","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"}}},{"_id":"ef87654d-3f71-70ea-bc98-1818f8c7be0d","tag":"li","classes":["c19136ba-5b7c-7c4e-4ce4-f7c8d1dc6857"],"children":["ef87654d-3f71-70ea-bc98-1818f8c7be0e"],"type":"ListItem","data":{"list":{"type":"item"},"attr":{"id":""}}},{"_id":"ef87654d-3f71-70ea-bc98-1818f8c7be0e","tag":"div","classes":["5574e9b1-9f77-f5af-9ac9-b2a8428813e7"],"children":["ef87654d-3f71-70ea-bc98-1818f8c7be0f"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"ef87654d-3f71-70ea-bc98-1818f8c7be0f","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"}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc1d","tag":"div","classes":["7f0b2cd9-6cad-f608-26dd-0ac6f215d200","36b81ecc-76e7-8af1-fd27-0d99924ee328"],"children":["5644fd03-802f-4723-19f1-812df067fc1e"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc1e","tag":"div","classes":["81cd45f3-d22c-5aa8-a045-129137d4c632","56ca2267-0ea9-2a37-4934-56910cd647ff"],"children":["5644fd03-802f-4723-19f1-812df067fc1f","5644fd03-802f-4723-19f1-812df067fc20"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc1f","tag":"ul","classes":["a8d103b7-f16d-3d64-0bf6-f0e2cc360816"],"children":[],"type":"List","data":{"tag":"ul","list":{"type":"list","unstyled":true},"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc20","tag":"div","classes":["b18a0dec-e564-2c8e-314c-68d64268946c"],"children":["5644fd03-802f-4723-19f1-812df067fc21","5644fd03-802f-4723-19f1-812df067fc23"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc21","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","b572ec37-14dd-5b89-cf06-8b10fdf4b598"],"children":["5644fd03-802f-4723-19f1-812df067fc22"],"type":"Link","data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"xattr":[{"name":"aria-label","value":"slider previous"}],"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc22","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":"5644fd03-802f-4723-19f1-812df067fc23","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","a44399e7-2da1-69d0-5b0e-27b5b309998c"],"children":["5644fd03-802f-4723-19f1-812df067fc24"],"type":"Link","data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"xattr":[{"name":"aria-label","value":"next control"}],"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc24","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":"5644fd03-802f-4723-19f1-812df067fc25","tag":"div","classes":["e348e028-04ab-4c93-f0ef-84ae438eb90d"],"children":["5644fd03-802f-4723-19f1-812df067fc26","5644fd03-802f-4723-19f1-812df067fc2b","d63da41f-c8ea-6d9f-fec2-67b6fa2b613a"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc26","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["5644fd03-802f-4723-19f1-812df067fc27","5644fd03-802f-4723-19f1-812df067fc28"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc27","tag":"div","classes":["fb1c02bc-32eb-d45e-5361-dbf0316ce13d","d94527c0-4f73-fa43-8d4e-3a2fa7097e25"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc28","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["5644fd03-802f-4723-19f1-812df067fc29"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc29","tag":"div","classes":[],"children":["5644fd03-802f-4723-19f1-812df067fc2a"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc2a","text":true,"v":"Inactive-State"},{"_id":"5644fd03-802f-4723-19f1-812df067fc2b","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["5644fd03-802f-4723-19f1-812df067fc2c","5644fd03-802f-4723-19f1-812df067fc2d"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc2c","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":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc2d","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["5644fd03-802f-4723-19f1-812df067fc2e"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc2e","tag":"div","classes":[],"children":["5644fd03-802f-4723-19f1-812df067fc2f"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""}}},{"_id":"5644fd03-802f-4723-19f1-812df067fc2f","text":true,"v":"Active State"},{"_id":"d63da41f-c8ea-6d9f-fec2-67b6fa2b613a","tag":"div","classes":["6f138dac-c36f-35e3-4828-aaf259e2ee45"],"children":[],"type":"Block","data":{"tag":"div","attr":{"id":""},"text":false}}],"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":"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":"7f0b2cd9-6cad-f608-26dd-0ac6f215d200","fake":false,"type":"class","name":"bottom-top","namespace":"","comb":"","styleLess":"","variants":{},"children":["36b81ecc-76e7-8af1-fd27-0d99924ee328"],"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":"36b81ecc-76e7-8af1-fd27-0d99924ee328","fake":false,"type":"class","name":"margin-medium","namespace":"","comb":"&","styleLess":"margin-top: 3rem;","variants":{"tiny":{"styleLess":"margin-top: 1.5rem;"}},"children":[],"selector":null},{"_id":"56ca2267-0ea9-2a37-4934-56910cd647ff","fake":false,"type":"class","name":"layout-spaced-between","namespace":"","comb":"&","styleLess":"justify-content: space-between;","variants":{"tiny":{"styleLess":"padding-top: 1.5rem; padding-bottom: 0rem;"}},"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":"a8d103b7-f16d-3d64-0bf6-f0e2cc360816","fake":false,"type":"class","name":"splide__pagination","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 0px; margin-left: -2px; padding-left: 0px; justify-content: flex-start;","variants":{},"children":["6f212c24-02dc-d30e-9f21-b2ec8fe05863"],"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":"6f138dac-c36f-35e3-4828-aaf259e2ee45","fake":false,"type":"class","name":"splide__sr","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"5da8d07e0f4f500e572d7465","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","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","86b23ed0-10de-c65d-5485-c873f6834126"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"754fc96d-1baa-fc97-f3b3-be67442b8920","tag":"div","classes":["f29e95d3-935a-540a-2db7-7399d42d540d"],"children":["4daa626c-c6ce-1ede-8fe2-228d6a64fe7f","32fdbdda-eb78-7b65-0d7a-f310b2280a32"],"type":"Block","data":{"tag":"div","xattr":[{"name":"aria-label","value":"Basic Slider 001"}],"text":false,"attr":{"id":""}}},{"_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":""}}},{"_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":""}}},{"_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":""}}},{"_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":""}}},{"_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":{}}}},{"_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":""}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe83","tag":"div","classes":[],"children":["4daa626c-c6ce-1ede-8fe2-228d6a64fe84"],"type":"Block","data":{"tag":"div","text":true,"attr":{"id":""}}},{"_id":"4daa626c-c6ce-1ede-8fe2-228d6a64fe84","text":true,"v":"No items found."},{"_id":"32fdbdda-eb78-7b65-0d7a-f310b2280a32","tag":"div","classes":["7f0b2cd9-6cad-f608-26dd-0ac6f215d200","36b81ecc-76e7-8af1-fd27-0d99924ee328"],"children":["74b9df9d-8e3f-ed99-aa91-5857ab90e161"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"74b9df9d-8e3f-ed99-aa91-5857ab90e161","tag":"div","classes":["81cd45f3-d22c-5aa8-a045-129137d4c632","56ca2267-0ea9-2a37-4934-56910cd647ff"],"children":["2bc839c5-f05c-139e-f6ce-0c022fec7acd","9b2ba24c-15a8-adb2-f513-7ee634db753c"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"2bc839c5-f05c-139e-f6ce-0c022fec7acd","tag":"ul","classes":["a8d103b7-f16d-3d64-0bf6-f0e2cc360816"],"children":[],"type":"List","data":{"tag":"ul","list":{"type":"list","unstyled":true},"attr":{"id":""}}},{"_id":"9b2ba24c-15a8-adb2-f513-7ee634db753c","tag":"div","classes":["b18a0dec-e564-2c8e-314c-68d64268946c"],"children":["f5ddc13a-8f5a-178e-97be-1990b0fecb32","ebc4aff2-5acc-65da-8e2a-6495c8db9a5f"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"f5ddc13a-8f5a-178e-97be-1990b0fecb32","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","b572ec37-14dd-5b89-cf06-8b10fdf4b598"],"children":["3633fe10-d191-bce8-d8c0-b59cca2c6c1f"],"type":"Link","data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"xattr":[{"name":"aria-label","value":"slider previous"}],"attr":{"id":""}}},{"_id":"3633fe10-d191-bce8-d8c0-b59cca2c6c1f","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":"ebc4aff2-5acc-65da-8e2a-6495c8db9a5f","tag":"a","classes":["6d55aa96-a913-06c2-7b5a-32d7fe475547","a44399e7-2da1-69d0-5b0e-27b5b309998c"],"children":["ebc4aff2-5acc-65da-8e2a-6495c8db9a60"],"type":"Link","data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"xattr":[{"name":"aria-label","value":"next control"}],"attr":{"id":""}}},{"_id":"ebc4aff2-5acc-65da-8e2a-6495c8db9a60","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":"86b23ed0-10de-c65d-5485-c873f6834126","tag":"div","classes":["e348e028-04ab-4c93-f0ef-84ae438eb90d"],"children":["86b23ed0-10de-c65d-5485-c873f6834127","48b06bd9-4ba5-130d-91c7-d9e994fa9d2f","2fe5fe36-83c6-a57a-0a38-f12230c9f2b7"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"86b23ed0-10de-c65d-5485-c873f6834127","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["86b23ed0-10de-c65d-5485-c873f6834128","5e186f78-af9a-d86e-d2f8-f35c5f34d8db"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"86b23ed0-10de-c65d-5485-c873f6834128","tag":"div","classes":["fb1c02bc-32eb-d45e-5361-dbf0316ce13d","d94527c0-4f73-fa43-8d4e-3a2fa7097e25"],"children":[],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"5e186f78-af9a-d86e-d2f8-f35c5f34d8db","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["6d1b175c-ced5-4e9d-9183-2807c7af7176"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"6d1b175c-ced5-4e9d-9183-2807c7af7176","tag":"div","classes":[],"children":["4c51f8e3-0b66-4b39-6c5f-693fcec2d3c1"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""}}},{"_id":"4c51f8e3-0b66-4b39-6c5f-693fcec2d3c1","text":true,"v":"Inactive-State"},{"_id":"48b06bd9-4ba5-130d-91c7-d9e994fa9d2f","tag":"div","classes":["1a16a50b-a828-6200-57d5-78f44fa2857a"],"children":["48b06bd9-4ba5-130d-91c7-d9e994fa9d30","48b06bd9-4ba5-130d-91c7-d9e994fa9d31"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"48b06bd9-4ba5-130d-91c7-d9e994fa9d30","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":""}}},{"_id":"48b06bd9-4ba5-130d-91c7-d9e994fa9d31","tag":"div","classes":["e2a89b02-6431-94db-cbcf-09674970f8d7","ca9d1cd7-f24f-358b-6de9-2b1885b9681f"],"children":["48b06bd9-4ba5-130d-91c7-d9e994fa9d32"],"type":"Block","data":{"tag":"div","text":false,"attr":{"id":""}}},{"_id":"48b06bd9-4ba5-130d-91c7-d9e994fa9d32","tag":"div","classes":[],"children":["48b06bd9-4ba5-130d-91c7-d9e994fa9d33"],"type":"Block","data":{"text":true,"tag":"div","attr":{"id":""}}},{"_id":"48b06bd9-4ba5-130d-91c7-d9e994fa9d33","text":true,"v":"Active State"},{"_id":"2fe5fe36-83c6-a57a-0a38-f12230c9f2b7","tag":"div","classes":["6f138dac-c36f-35e3-4828-aaf259e2ee45"],"children":[],"type":"Block","data":{"tag":"div","attr":{"id":""},"text":false}}],"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":"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":"7f0b2cd9-6cad-f608-26dd-0ac6f215d200","fake":false,"type":"class","name":"bottom-top","namespace":"","comb":"","styleLess":"","variants":{},"children":["36b81ecc-76e7-8af1-fd27-0d99924ee328"],"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":"36b81ecc-76e7-8af1-fd27-0d99924ee328","fake":false,"type":"class","name":"margin-medium","namespace":"","comb":"&","styleLess":"margin-top: 3rem;","variants":{"tiny":{"styleLess":"margin-top: 1.5rem;"}},"children":[],"selector":null},{"_id":"56ca2267-0ea9-2a37-4934-56910cd647ff","fake":false,"type":"class","name":"layout-spaced-between","namespace":"","comb":"&","styleLess":"justify-content: space-between;","variants":{"tiny":{"styleLess":"padding-top: 1.5rem; padding-bottom: 0rem;"}},"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":"a8d103b7-f16d-3d64-0bf6-f0e2cc360816","fake":false,"type":"class","name":"splide__pagination","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 0px; margin-left: -2px; padding-left: 0px; justify-content: flex-start;","variants":{},"children":["6f212c24-02dc-d30e-9f21-b2ec8fe05863"],"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":"6f138dac-c36f-35e3-4828-aaf259e2ee45","fake":false,"type":"class","name":"splide__sr","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"5da8d07e0f4f500e572d7465","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.
    • type
      If 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
    • perPage
      Determines the number of slides to display in a page. You can adjust these based on each screen width/breakpoint.
    • perMove
      Determines the number of slides to move at once
    • gap
      The gap between slides. The CSS format is acceptable (px, rem, % and etc)
    • padding
      Sets 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.
      // By number (px)
      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 }
    • focus
      Determines which slide should be active if the carousel has multiple slides in a page.
    • pagination
      Determines whether to create pagination (indicator dots) or not
    • speed
      The transition speed in milliseconds. If 0, the carousel immediately jumps to the target slide.
    • easing
      The 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.)
    • classes
      This 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


      },
    • breakpoints
      This 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,
           },  
         }
       }
    Congrats Component has been copied successfully!