Custom Components

CMS Slider

{"@webstudio/instance/v0.1":{"instanceSelector":["f1HcNa0YQkcv2aBtL6DgL","PRbbtoRNsrU4oMbg-yVBd","8EJ38ea7P6hiqM3_Gyzqq","YNuqQRED2dOu2YevrPxV4"],"children":[{"type":"id","value":"f1HcNa0YQkcv2aBtL6DgL"}],"instances":[{"type":"instance","id":"f1HcNa0YQkcv2aBtL6DgL","component":"Box","label":"Slider","children":[{"type":"id","value":"QLFC0eniUcKkAOigwBeiz"},{"type":"id","value":"2f_bRli8x77fLfBf1w0U8"}]},{"type":"instance","id":"QLFC0eniUcKkAOigwBeiz","component":"Box","label":"Embla","children":[{"type":"id","value":"1qvIyUPVsy-8ABWGE1h55"}]},{"type":"instance","id":"1qvIyUPVsy-8ABWGE1h55","component":"Box","label":"Embla Container","children":[{"type":"id","value":"ExQfaE2MkxsEZhyd_5GvO"}]},{"type":"instance","id":"ExQfaE2MkxsEZhyd_5GvO","component":"ws:collection","children":[{"type":"id","value":"7IW3S27QqrsTvZchqoxAc"}]},{"type":"instance","id":"7IW3S27QqrsTvZchqoxAc","component":"Box","label":"Embla Slide","children":[{"type":"id","value":"pPWsR4L1SlCCpWokY4Cs_"}]},{"type":"instance","id":"pPWsR4L1SlCCpWokY4Cs_","component":"Box","label":"Image Wrapper","children":[{"type":"id","value":"wHsFwqBgzPADL4mjmEFFD"}]},{"type":"instance","id":"wHsFwqBgzPADL4mjmEFFD","component":"Image","children":[]},{"type":"instance","id":"2f_bRli8x77fLfBf1w0U8","component":"HtmlEmbed","label":"JS","children":[]}],"styleSourceSelections":[{"instanceId":"f1HcNa0YQkcv2aBtL6DgL","values":["xvT0Nq1hycswrqXo_u2MY"]},{"instanceId":"QLFC0eniUcKkAOigwBeiz","values":["c5efo7bOLK99lMj5v4uta"]},{"instanceId":"1qvIyUPVsy-8ABWGE1h55","values":["D56eOtbsL0UOVE-5D4gBx"]},{"instanceId":"7IW3S27QqrsTvZchqoxAc","values":["-v4X2FXPSfWCipqxjw9b4"]},{"instanceId":"pPWsR4L1SlCCpWokY4Cs_","values":["zHE8FoRq1BlrRhWNs8D_-"]},{"instanceId":"wHsFwqBgzPADL4mjmEFFD","values":["4ryNj9mFQcxKsn5zJAC3x"]}],"styleSources":[{"type":"local","id":"xvT0Nq1hycswrqXo_u2MY"},{"type":"local","id":"c5efo7bOLK99lMj5v4uta"},{"type":"local","id":"D56eOtbsL0UOVE-5D4gBx"},{"type":"local","id":"-v4X2FXPSfWCipqxjw9b4"},{"type":"local","id":"zHE8FoRq1BlrRhWNs8D_-"},{"type":"local","id":"4ryNj9mFQcxKsn5zJAC3x"}],"breakpoints":[{"id":"2AQJrSP7PN3cvLY9d2vK-","label":"Base"},{"id":"UXQtH0v48lAbrKmOit3SL","label":"Tablet","maxWidth":991},{"id":"6l6QbNcYfT_aifej9TiXZ","label":"Mobile portrait","maxWidth":479}],"styles":[{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"aspectRatio","value":{"type":"unparsed","value":"16 / 9"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"4ryNj9mFQcxKsn5zJAC3x","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"4ryNj9mFQcxKsn5zJAC3x","property":"height","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"4ryNj9mFQcxKsn5zJAC3x","property":"objectFit","value":{"type":"keyword","value":"cover"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"overflowX","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"overflowY","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"flexGrow","value":{"type":"unit","unit":"number","value":0},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"flexShrink","value":{"type":"unit","unit":"number","value":0},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"flexBasis","value":{"type":"var","value":"slide-size"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"minWidth","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"paddingLeft","value":{"type":"var","value":"slide-spacing"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xvT0Nq1hycswrqXo_u2MY","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xvT0Nq1hycswrqXo_u2MY","property":"overflowX","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xvT0Nq1hycswrqXo_u2MY","property":"overflowY","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"D56eOtbsL0UOVE-5D4gBx","property":"cursor","value":{"type":"keyword","value":"grab"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"justifyContent","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"borderTopLeftRadius","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"borderTopRightRadius","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"borderBottomLeftRadius","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"zHE8FoRq1BlrRhWNs8D_-","property":"borderBottomRightRadius","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"c5efo7bOLK99lMj5v4uta","property":"marginRight","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"c5efo7bOLK99lMj5v4uta","property":"marginLeft","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"c5efo7bOLK99lMj5v4uta","property":"overflowX","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"c5efo7bOLK99lMj5v4uta","property":"overflowY","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"D56eOtbsL0UOVE-5D4gBx","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"D56eOtbsL0UOVE-5D4gBx","property":"touchAction","value":{"type":"tuple","value":[{"type":"keyword","value":"pan-y"},{"type":"keyword","value":"pinch-zoom"}]},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"D56eOtbsL0UOVE-5D4gBx","property":"marginLeft","value":{"type":"unparsed","value":"calc(var(--slide-spacing) * -1)"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"transform","value":{"type":"tuple","value":[{"type":"function","args":{"type":"layers","value":[{"type":"unit","unit":"number","value":0},{"type":"unit","unit":"number","value":0},{"type":"unit","unit":"number","value":0}]},"name":"translate3d"}]},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"4ryNj9mFQcxKsn5zJAC3x","property":"userSelect","value":{"type":"keyword","value":"none"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"--slide-size","value":{"type":"unit","unit":"%","value":33},"listed":true},{"breakpointId":"UXQtH0v48lAbrKmOit3SL","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"--slide-size","value":{"type":"unit","unit":"%","value":50},"listed":true},{"breakpointId":"6l6QbNcYfT_aifej9TiXZ","styleSourceId":"-v4X2FXPSfWCipqxjw9b4","property":"--slide-size","value":{"type":"unit","unit":"%","value":80},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"D56eOtbsL0UOVE-5D4gBx","property":"--slide-spacing","value":{"type":"unit","unit":"rem","value":1.6},"listed":true}],"dataSources":[{"type":"parameter","id":"moXWOfP05DLbBRSjG0z0W","scopeInstanceId":"ExQfaE2MkxsEZhyd_5GvO","name":"collectionItem"}],"resources":[],"props":[{"id":"Ucy2bCwRPug1nifAp9_-Q","instanceId":"2f_bRli8x77fLfBf1w0U8","name":"code","type":"string","value":"<script type=\"module\" src=\"https://drevo.b-cdn.net/Library/Custom%20Components/CMS%20Slider/cms-slider-v1.1.js\"></script> "},{"id":"Uq0xdBwWPSf0-2P1iWH12","instanceId":"2f_bRli8x77fLfBf1w0U8","name":"clientOnly","type":"boolean","value":true},{"id":"lDcJOPHVvC1OT6o-XzT6a","instanceId":"ExQfaE2MkxsEZhyd_5GvO","name":"data","type":"json","value":[{"image":"https://images.unsplash.com/photo-1506744038136-46273834b3fb","image Alt":"Image slide 1"},{"image":"https://images.unsplash.com/photo-1441974231531-c6227db76b6e","image Alt":"Image slide 2"},{"image":"https://images.unsplash.com/photo-1507525428034-b723cf961d3e","image Alt":"Image slide 3"},{"image":"https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0","image Alt":"Image slide 4"},{"image":"https://images.unsplash.com/photo-1501785888041-af3ef285b470","image Alt":"Image slide 5"},{"image":"https://images.unsplash.com/photo-1506744038136-46273834b3fb","image Alt":"Image slide 6"},{"image":"https://images.unsplash.com/photo-1441974231531-c6227db76b6e","image Alt":"Image slide 7"},{"image":"https://images.unsplash.com/photo-1507525428034-b723cf961d3e","image Alt":"Image slide 8"},{"image":"https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0","image Alt":"Image slide 9"},{"image":"https://images.unsplash.com/photo-1501785888041-af3ef285b470","image Alt":"Image slide 10"}]},{"id":"EK99S6Qz86dvJZ7AG87Vb","instanceId":"ExQfaE2MkxsEZhyd_5GvO","name":"item","type":"parameter","value":"moXWOfP05DLbBRSjG0z0W"},{"id":"nXFBdXwnykQM00pF4XXtw","instanceId":"1qvIyUPVsy-8ABWGE1h55","name":"className","type":"string","value":"embla__container"},{"id":"wZuDfQJI9-41CnmbAQbQR","instanceId":"QLFC0eniUcKkAOigwBeiz","name":"className","type":"string","value":"embla"},{"id":"kWBaFuUMyfMY-SCeh5DTm","instanceId":"7IW3S27QqrsTvZchqoxAc","name":"className","type":"string","value":"embla__slide"},{"id":"uOzFAHJet-zPZr74Xs6Os","instanceId":"wHsFwqBgzPADL4mjmEFFD","name":"src","type":"expression","value":"$ws$dataSource$moXWOfP05DLbBRSjG0z0W.image"},{"id":"snrDTwFg2BpoyK6UkAMnv","instanceId":"wHsFwqBgzPADL4mjmEFFD","name":"alt","type":"expression","value":"$ws$dataSource$moXWOfP05DLbBRSjG0z0W[\"image Alt\"]"},{"id":"Jt7TACjqBCtViL5wZb5wh","instanceId":"QLFC0eniUcKkAOigwBeiz","name":"dv-slider","type":"string","value":"loop start-0 align-center speed-20 ltr no-drag-free draggable"}],"assets":[]}}

CMS Slider

Instructions

Overview

Add a responsive, customizable content slider to your website.

Getting Started

Quick Start

Click the Copy Component button on the top of the page.
Paste the component into your Webstudio site.

Manual Start

Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/CMS%20Slider/cms-slider-v1.1.js"></script>[/code-block]

Add the Slider Structure: Create a container with the following structure:

cms slider attributes

Customization Options

Slider Settings

Add these options to the dv-slider attribute:

loop / no-loop = Enable/disable infinite looping (default: no-loop)
draggable / no-draggable = Enable/disable mouse drag (default: draggable)
drag-free / no-drag-free = Enable/disable momentum scrolling (default: no-drag-free)
align-start / align-center / align-end = Slide alignment (default: center)
start-X = Starting slide index (default: 0)
speed-X = Animation speed in arbitrary units (default: 10)
rtl / ltr = Direction of slider movement (default: ltr [left-to-right])

Example: dv-slider="loop align-start speed-15 start-1"

Notes

The component automatically loads the Embla Carousel library
The component applies minimal styling to allow for custom designs
Slides can contain any HTML content including images, text, and other components