在Jupyter Notebook中嵌入幻灯片展示

Question

我希望你能提供一种Python的方式，在Jupyter笔记本单元格中嵌入幻灯片，类似于这里的幻灯片：

https://www.w3schools.com/howto/howto_js_slideshow.asp

我不需要任何CSS样式，也不需要除了上/下一张幻灯片箭头之外的任何按钮。

我不想将整个笔记本变成幻灯片演示文稿，只想转换单个单元格，所以我不能使用reveal.js。

考虑到所有这些其他交互式小部件都存在，我很难相信没有一种简单的方法可以在笔记本中嵌入幻灯片演示文稿。

http://jupyter.org/widgets

真的没有简单的方法来做到这一点吗？

- d_iv

Answer 1

http://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html

事实证明，一旦IntSlider获得焦点（被点击），就可以使用箭头键递增到下一个/上一个滑块值，这对我的目的来说已经足够好了。以下是我如何使用滑块小部件的示例：

import ipywidgets as wg
from IPython.display import SVG

def f(x):
    if x == 1:
        return SVG(filename='./path/to/pic1')
    elif x == 2:
        return SVG(filename='./path/to/pic2')
    elif x == 3:
        return SVG(filename='./path/to/pic3')
    else:
        return SVG(filename='./path/to/pic4')

wg.interact(f, x=wg.IntSlider(min=1,max=4,step=1));

- d_iv

Answer 2

我遇到了同样的问题，但无法使用ipywidgets（笔记本最终通过fastpages转换为html）。 我通过创建一个包含所有图像的xarray，然后使用plotly.js动画功能，找到了一种可行的方法。它添加了一个滑块，可以轻松切换图像。这是一个例子：

import numpy as np
import plotly.express as px
from imageio import imread
import xarray as xr

# Show a list of numpy images as a carousel
# key is the label of the slider
def show_images_carousel(images, labels, key: str, title: str, height:int):        
    stacked = np.stack(images, axis=0)
    xrData = xr.DataArray(
        data   = stacked,
        dims   = [key, 'row', 'col', 'rgb'],
        coords = {key: labels}
    )
    # Hide the axes
    layout_dict = dict(yaxis_visible=False, yaxis_showticklabels=False, xaxis_visible=False, xaxis_showticklabels=False)
    return px.imshow(xrData, title=title, animation_frame=key).update_layout(layout_dict)

# Show a list of URLs as a carousel, loading then as numpy images first
def show_images_carousel_from_urls(image_urls, labels, key: str, title:str, height:int):
    images = [imread(url, pilmode='RGB') for url in image_urls]
    return show_images_carousel(images, labels, key, title, height)

使用方法如下：

images = {
    "simulation_images/rgbspan.png": 'Original',
    "simulation_images/rgbspan_protan_brettel1997.png": "Brettel 1997",
    "simulation_images/rgbspan_protan_vienot1999.png": "Viénot 1999",
    "simulation_images/rgbspan_protan_machado2009.png": 'Machado 2009',    
    "simulation_images/rgbspan_protan_coblisv1.png": "Coblis V1",
    "simulation_images/rgbspan_protan_coblisv2.png": "Coblis V2" 
}

fig = show_images_carousel_from_urls (images.keys(), list(images.values()), 'Method', None, 700)
fig.show()

- nburrus

---

这是一个非常有用的答案。我已经寻找了20分钟。希望它很快能得到更多的赞！ - yuki