2a:null 2b:["$","title",null,{"children":"Image Carousel | Claudio Esperança | Observable"}] 31:T434,viewof options = Inputs.form({ animDuration: Inputs.range([1, 300], { value: 60, label: "anim duration", step: 1 }), translateY: Inputs.range([-100, 100], { value: 0, label: "translateY", step: 1 }), translateZ: Inputs.range([100, 600], { value: 300, label: "translateZ", step: 1 }), height: Inputs.range([100, 800], { value: 400, label: "height", step: 1 }), size: Inputs.range([100, 800], { value: 200, label: "size", step: 1 }), perspective: Inputs.range([100, 1500], { value: 900, label: "perspective", step: 1 }), imgCornerRadius: Inputs.range([0, 30], { value: 5, label: "corner radius", step: 1 }), imgBorderSize: Inputs.range([0, 30], { value: 5, label: "image border size", step: 1 }), imgBorderOpacity: Inputs.range([0, 1], { value: 0.05, label: "image border opacity", step: 0.01 }), imgBorderColor: Inputs.color({ value: "#000000", label: "image border color" }), background: Inputs.color({ value: "#f7f7f7", label: "background" }) })32:T8d3,carousel = function (images, options = {}) { const { animDuration = 60, translateY = 0, translateZ = 300, height = 400, size = 200, perspective = 900, imgCornerRadius = 5, imgBorderColor = "rgba(0,0,0,1)", imgBorderSize = 5, imgBorderOpacity = 0.1, background = "rgba(0,0,0,0.1)" } = options; let css = ` #carousel_main{ display: flex; background : ${background}; height: ${height}px; align-items: center; align-content: center; justify-content: center; } #carousel figure { display: flex; position: absolute; align-items: center; align-content: center; justify-content: center; top: 0; bottom: 0; left: 0; right:0; margin: auto; } #carousel figure img { border: ${imgBorderSize}px solid ${d3 .color(imgBorderColor) .copy({ opacity: imgBorderOpacity }) .formatRgb()}; border-radius: ${imgCornerRadius}px; } .carousel_container { position: relative; padding:0px; display: flex; align-items: center; align-content: center; justify-content: center; width: ${size}px; height: ${size}px; -webkit-perspective: ${perspective}px; perspective: ${perspective}px; } #carousel { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #carousel.running{ animation: spinY ${animDuration}s infinite normal linear forwards; } @keyframes spinY { 0% {transform:rotateY(360deg);} 100% {transform:rotateY(0deg);} } `; let body = html`

`; let figures = body.querySelector("#carousel"); const n = images.length; for (let i = 0; i < n; i++) { css += `#carousel figure:nth-child(${i + 1}) { -webkit-transform: rotateY(${ (360 / n) * i }deg) translateY(${translateY}px) translateZ(${translateZ}px);\n}\n`; figures.append(html`

${images[i]}`); } return html`${body}`; }33:[] 2e:{"id":"6f757eb7de052447","slug":"image-carousel","title":"Image Carousel","thumbnail":"c5e57146422a9a0c2ac1cfeaaa0152882158f56656db403c6687085cee476d83","access_level":"public","create_time":"$D2022-12-26T20:25:25.217Z","update_time":"$D2022-12-27T17:48:01.484Z","view_time":null,"first_public_time":"$D2022-12-27T17:48:45.750Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":314,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Image Carousel","cells":[{"id":0,"value":"# Image Carousel\n\nBased on [this implementation](https://observablehq.com/@noble/image-carousel) by [Noble](https://observablehq.com/@noble). Just added a little more flexibility to accommodate a varying number of images. \n\nUsage: carousel(_images_, _options_)\n>An interative exploration of all options is shown below","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"viewof nimages = Inputs.range([3, images.length], {\n step: 1,\n label: \"number of images\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"carousel(images.slice(0, nimages), options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"## Random image code\n\nFrom https://observablehq.com/@jobleonard/seam-carving-with-forward-energy-but-we-make-a-new-image-with","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"async function randomImage(sizeOrWidth = null, height = sizeOrWidth) {\n const size = sizeOrWidth ? `/${+sizeOrWidth}x${+height}` : \"\";\n return (\n await fetch(`https://source.unsplash.com/random${size}`, {\n method: \"head\",\n cache: \"no-store\"\n })\n ).url;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"randomImage()","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"imageUrls = [\n \"https://images.unsplash.com/photo-1670427490111-89edd555888a\",\n \"https://images.unsplash.com/photo-1671372675714-dbeff989d93c\",\n \"https://images.unsplash.com/photo-1670706157069-a1f7c270ae98\",\n \"https://images.unsplash.com/photo-1671254998088-8d6c3d9ed3f2\",\n \"https://images.unsplash.com/photo-1671933800148-3d5c295e0eed\",\n \"https://images.unsplash.com/photo-1670557934550-93665658943e\",\n \"https://images.unsplash.com/photo-1669747702727-7491c1c49032\",\n \"https://images.unsplash.com/photo-1670784124861-0e8d1ef1fab7\",\n \"https://images.unsplash.com/photo-1670258880109-18409061d7b2\",\n \"https://images.unsplash.com/photo-1671229389061-85957860f08d\",\n \"https://images.unsplash.com/photo-1671333676535-e6859367791b\",\n \"https://images.unsplash.com/photo-1671638738896-787ef80a9f4b\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// images = [\n// html`

`,\n// html`

`\n// ]\nimages = imageUrls.map((d) => html`

`)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"