30:[] 2e:{"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"},{"id":13,"value":"First, some elements:","pinned":false,"hidden":false,"mode":"md"},{"id":291,"value":"demoCards = [\"abscd\", html`

test

`, \"b3\", \"c\", \"d\", \"f\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"carousel(demoCards, { title: \"My carousel\" }, { perPage: 3 })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":61,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":385,"value":"feather = require(\"feather-icons\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"phosphor = import('https://cdn.skypack.dev/phosphor-icons@1.4.2?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"siema = require(\"siema\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}