{
const rows = gridRows;
const cols = gridColumns;
const space = gridSpace;
const div = htl.html`<div class="demo-slides-2">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
<style>
.demo-slides-2 {
background-color: white;
}
.demo-slides-2 .swiper {
height: ${width / 1.6}px;
}
.demo-slides-2 .swiper-wrapper {
}
.demo-slides-2 .swiper-slide {
box-sizing: border-box;
border: 4px solid #eee;
border-radius: 0.2em;
text-align: center;
font-size: 18px;
background: #fff;
height: calc((100% - ${
(rows - 1) * space
}px) / ${rows} - 20px) !important;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
</style>
</div>
</div>
`;
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)
}
});
}
Swiper = {
await swiperCSS;
await swiperCustomCss;
return (await import("swiper@8.0.7/swiper-bundle.esm.browser.js")).default;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8.0.7/swiper-bundle.css" />
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8.0.7/modules/navigation/navigation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8.0.7/modules/pagination/pagination.min.css" /> -->
<style>
:root {
--swiper-scrollbar-color: #eee;
--swiper-slide-border-color : #eee;
--swiper-slide-background-color: white;
--swiper-slide-border-width: 5px;
--swiper-slide-border-radius: 0.2em;
}
.swiper {
height: 100%;
}
/* */
.swiper .swiper-wrapper {
height: 100%;
}
.swiper .swiper-scrollbar {
background-color: var(--swiper-scrollbar-color);
}
.swiper .swiper-slide {
box-sizing: border-box;
border: var(--swiper-slide-border-width) solid var(--swiper-slide-border-color);
border-radius: var(--swiper-slide-border-radius);
background: var(--swiper-slide-background-color);
display: flex;
justify-content: center;
align-items: center;
}
.swiper.swiper-horizontal .swiper-slide {
height: calc(100% - 3px);
}
.swiper.swiper-vertical .swiper-slide {
width: calc(100% - 3px);
}
.swiper .swiper-scrollbar-drag {
background-color: var(--swiper-theme-color);
}
.swiper .swiper-button-next ,
.swiper .swiper-button-next {
}
.swiper .swiper-pagination {
font-size: 1.2em;
background-color: rgba(255,255,255,0.4);
border-radius: var(--swiper-slide-border-radius);
color: rgba(0,0,0,0.4);
left: calc(50% - 4em);
width: 8em;
}
.swiper .swiper-pagination:hover {
background-color: rgba(255,255,255,1);
color: rgba(0,0,0,1);
left: calc(50% - 4em);
width: 8em;
}
/* */
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
