How to programmatically jump to next slide using Button?

Panel
1

I want to go to the last slide in
Slides — Panel v1.0.3 (holoviz.org)

import hvplot.pandas
import numpy as np
import panel as pn
import pandas as pd

pn.extension(design=pn.theme.Material)

xs = np.linspace(0, np.pi)

freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

widgets = pn.WidgetBox(freq, phase, horizontal=True)

def sine(freq, phase):
    return pd.DataFrame(dict(y=np.sin(xs*freq+phase)), index=xs)

def cosine(freq, phase):
    return pd.DataFrame(dict(y=np.cos(xs*freq+phase)), index=xs)

dfi_sine = hvplot.bind(sine, freq, phase).interactive()
dfi_cosine = hvplot.bind(cosine, freq, phase).interactive()

plot_opts = dict(responsive=True, min_height=400)

template = pn.template.SlidesTemplate(
    title='The slide title', logo='https://raw.githubusercontent.com/holoviz/panel/main/doc/_static/logo_stacked.png'
)
template.main.extend([   
    pn.pane.Markdown('Slides Template', styles={'font-size': '3em'}, align='center'),
    pn.Card(dfi_sine.hvplot(**plot_opts).output(), widgets, title='Sine', margin=20, tags=['fragment']),
])

template.main.append(
    pn.Card(dfi_cosine.hvplot(**plot_opts).output(), widgets, title='Cosine', margin=20),
)

template.servable();
2 

        button = pn.widgets.Button(
            name="start",
            max_width=50,
            align="center",
        )
        button.js_on_click(
            code="""
            var currentDomain = window.location.href;
            var regex = /#\/slide-(\d+)/;
            var match = currentDomain.match(regex);
            if (match) {
                var slideNumber = parseInt(match[1]);
                var newSlideNumber = slideNumber + 1;
                var newPage = currentDomain.replace(regex, "#/slide-" + newSlideNumber);
                window.location.href = newPage;
            }
            """
        )
2 Likes
3

Its a workaround. But really there should be page index parameter that we could get and set. Feel free to open a feature request @ahuang11 .

1 Like