2a:null 2b:["$","title",null,{"children":"Siema carousel in Observable | quintoelab | Observable"}] 30:[] 2e:{"id":"40bab73ce7675ba3","slug":"siema-carousel","title":"Siema carousel in Observable","thumbnail":"9d1dee945d9aeb6450a8d74599172fa04d41ae3e9636273bed5b96a9717b3be5","access_level":"public","create_time":"$D2021-10-14T21:14:47.168Z","update_time":"$D2022-02-25T02:10:29.911Z","view_time":null,"first_public_time":"$D2022-05-26T03:16:56.140Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8ecf893159388c3a","login":"quintoelab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b803a06bc4f1144429bdf5c0e85eb873a3abaa561c281a6f800e0f338420140a","tier":"pro_2024"},"version":432,"publish_version":432,"role":null,"authored":false,"authors":[{"type":"individual","id":"69810cd3cf4bf30c","login":"eads","name":"David Eads","avatar_url":"https://avatars-next.observableusercontent.com/ed73f86cbd46170a17e3bb2a06a1939ef04e5dc379b856148b769d7ac41ab78b","tier":null}],"members":[{"type":"individual","id":"69810cd3cf4bf30c","login":"eads","name":"David Eads","avatar_url":"https://avatars-next.observableusercontent.com/ed73f86cbd46170a17e3bb2a06a1939ef04e5dc379b856148b769d7ac41ab78b","tier":null,"role":"editor"},{"type":"team","id":"8ecf893159388c3a","login":"quintoelab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b803a06bc4f1144429bdf5c0e85eb873a3abaa561c281a6f800e0f338420140a","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Siema carousel in Observable","cells":[{"id":0,"value":"# Siema carousel in Observable\n\n[This notebook](https://observablehq.com/@markmiro/wrapping-carousel-math) demonstrates a nice technique for handling a carousel, but does it with React. Let's try a pure Observable version of the same idea!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"First, some elements:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"demoCards = [\"abscd\", html`

test

`, \"b3\", \"c\", \"d\", \"f\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"carousel(demoCards, { title: \"My carousel\" }, { perPage: 3 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"carousel = function*(cards, opts = {}, siemaOpts = {}) { \n const options = {\n title: \"Default title\",\n ...opts\n };\n \n const carouselElem = html`

\n ${cards.map(c => html`

${c}

`)}\n

`;\n const prev = html``;\n const next = html``;\n\n yield html`\n

${opts.title}

${prev} ${next}

\n ${carouselElem}\n `;\n \n let siemaCarousel = new siema({ \n selector: carouselElem,\n ...siemaOpts,\n });\n \n prev.addEventListener('click', () => siemaCarousel.prev());\n next.addEventListener('click', () => siemaCarousel.next());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"feather = require(\"feather-icons\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"phosphor = import('https://cdn.skypack.dev/phosphor-icons@1.4.2?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"siema = require(\"siema\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"