28:null 29:["$","title",null,{"children":"Swiper JS | Mikhail Kotelnikov | Observable"}] 2e:T8a5,{ const div = htl.html`

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

`; yield div; const swiper = new Swiper(div.querySelector(".swiper"), { // Optional parameters // direction: "horizontal", // "vertical", direction: slidesType, speed: 500, spaceBetween: 10, // autoHeight: true, centeredSlides: true, // loop: true, hashNavigation: true, keyboard: { enabled: true }, // If we need pagination pagination: { el: div.querySelector(".swiper-pagination"), clickable: true, type: "fraction" }, // Navigation arrows navigation: { nextEl: div.querySelector(".swiper-button-next"), prevEl: div.querySelector(".swiper-button-prev") }, // And if we need scrollbar scrollbar: { el: div.querySelector(".swiper-scrollbar"), draggable: true, // draggable scrollbar snapOnRelease: true }, on: { beforeSlideChangeStart: (e) => console.log("* BEFORE SLIDE CHANGE:", e), slideChange: (e) => console.log("* SLIDE CHANGED:", e) } }); }2f:T83c,{ const rows = gridRows; const cols = gridColumns; const space = gridSpace; const div = htl.html`

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

`; yield div; const swiper = new Swiper(div.querySelector(".swiper"), { slidesPerView: cols, grid: { rows }, speed: 500, spaceBetween: space, keyboard: { enabled: true }, // If we need pagination pagination: { el: div.querySelector(".swiper-pagination"), clickable: true }, // And if we need scrollbar scrollbar: { el: div.querySelector(".swiper-scrollbar"), draggable: true, // draggable scrollbar snapOnRelease: true }, on: { beforeSlideChangeStart: (e) => console.log("* BEFORE SLIDE CHANGE:", e), slideChange: (e) => console.log("* SLIDE CHANGED:", e) } }); }30:T615,31:[] 2c:{"id":"66a252bb034b11bb","slug":"swiper-js","title":"Swiper JS","thumbnail":"5338b7fcc662d82511072d97cec9defce8068e2af39dcade56aa58eb4672f806","access_level":"public","create_time":"$D2022-03-25T12:05:08.333Z","update_time":"$D2022-03-25T12:08:02.510Z","view_time":null,"first_public_time":"$D2022-03-25T12:08:13.878Z","has_unpublished_edits":null,"fork":{"id":"86c5cf0475612eaf","slug":"slide-deck-example","title":"Slide Deck: Example","owner":{"id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":"starter_2024"},"version":495,"publish_version":495,"role":null,"authored":false,"authors":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null}],"members":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"dc96c6a130b468e3","slug":"slideshow","title":"SlideShow","owner":{"id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov"}},"type":"notebook","body":{"title":"Swiper JS","cells":[{"id":0,"value":"# Swiper JS\n\nThis is an example of basic integration of SwiperJS in Observable notebooks.\nhttps://swiperjs.com/\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"## Full View Slides","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"viewof slidesType = Inputs.radio(\n new Map([\n [\"Horizontal\", \"horizontal\"],\n [\"Vertical\", \"vertical\"]\n ]),\n {\n value: \"vertical\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"## Slides Grid\n\nSee:\n- https://swiperjs.com/demos#slides-grid\n- https://codesandbox.io/s/j4fsx?file=/index.html:1450-2015","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"viewof gridRows = Inputs.range([1, 4], { label: \"Rows:\", step: 1 })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"viewof gridColumns = Inputs.range([1, 4], { label: \"Columns:\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"viewof gridSpace = Inputs.range([0, 16], {\n label: \"Space between slides:\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## JS Imports / CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Swiper = {\n await swiperCSS;\n await swiperCustomCss;\n return (await import(\"swiper@8.0.7/swiper-bundle.esm.browser.js\")).default;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"swiperCSS","database":"$undefined"},{"id":251,"value":"$30","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"swiperCustomCss","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"