28:null 29:["$","title",null,{"children":"Image Carousel (Forked Version) | Shipeng Sun | Observable"}] 2f: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" }) })30:T8d7,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 = htl.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}`; }31:[] 2c:{"id":"fc10c2a5d3a16aba","slug":null,"title":"Image Carousel (Forked Version)","thumbnail":"e2adea1f87c4670e149b7191597d443bed500275ac6dd996dab593b0ce527804","access_level":"public","create_time":"$D2024-12-01T20:49:34.287Z","update_time":"$D2024-12-02T03:02:01.392Z","view_time":null,"first_public_time":"$D2024-12-01T20:49:34.287Z","fork":{"id":"6f757eb7de052447","slug":"image-carousel","title":"Image Carousel","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024"},"version":325,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null}],"members":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Image Carousel (Forked Version)","cells":[{"id":0,"value":"# Image Carousel (Forked Version)\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":"$2f","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":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$30","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":"//*\nimageUrls = [\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]\n/*/\nimageUrls = new Array(2).fill([\"images/ming_na_rect.png\", \n \"images/nyc_skyline_water.png\",\n \"images/futuristic_cityscape3_by_zakazeskiz_dg4beed-fullview.png\"]).flat();\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":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"