Public
Edited
Mar 1, 2023
Insert cell
Insert cell
Insert cell
{
let index = 1;
const ui = htl.html`<div>`;

const increment = () => {
if (index < images.length-1) {
index = index + 1;
updateUi();
}
};

const decrement = () => {
if (index > 0) {
index = index - 1;
updateUi();
}
};

const next = htl.html`<button onclick=${increment}>Next</button>`;
const prev = htl.html`<button onclick=${decrement}>Previous</button>`;

const updateUi = () => {
console.log(index)
const internal = html`<div>
<img width=300 height=300 src=${images[index]}>
${prev}
${next}
</div>`;
ui.innerHTML = null;
ui.append(internal);
};

updateUi();
return ui;
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more