Skip to content

MkImageSlideshow

Show source on GitHub

Node to show an Image slideshow (in autoplay mode).

Example: Regular

Jinja

{{ ["https://picsum.photos/700", "https://picsum.photos/701"] | MkImageSlideshow }}

Python

MkImageSlideshow(['https://picsum.photos/700', 'https://picsum.photos/701'])


<div style="width: 100%; padding-bottom: 25%" data-simple-slider="">
  <img src="https://picsum.photos/700">
  <img src="https://picsum.photos/701">
</div>

<div style="width: 100%; padding-bottom: 25%" data-simple-slider="">
  <img src="https://picsum.photos/700">
  <img src="https://picsum.photos/701">
</div>

Bases: MkTemplate

__init__ 

__init__(images: list[str], **kwargs: Any)

Parameters:

Name Type Description Default
images list[str]

A list of image URLs to use for the slideshow

 required
kwargs Any

Keyword arguments passed to parent

 {}
Name Children Inherits
MkTemplate
mknodes.templatenodes.mktemplate
Node representing a jinja template.		 
graph TD
  94721311908688["mkimageslideshow.MkImageSlideshow"]
  94721308869584["mktemplate.MkTemplate"]
  94721311697232["mkcontainer.MkContainer"]
  94721308848336["mknode.MkNode"]
  94721311766592["node.Node"]
  140564252373184["builtins.object"]
  94721308869584 --> 94721311908688
  94721311697232 --> 94721308869584
  94721308848336 --> 94721311697232
  94721311766592 --> 94721308848336
  140564252373184 --> 94721311766592
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkimageslideshow/metadata.toml
[metadata]
icon = "mdi:image-multiple"
name = "MkImageSlideshow"
group = "image"

[[resources.js]]
link = "https://rawgit.com/ruyadorno/simple-slider/master/dist/simpleslider.min.js"

[[resources.js]]
filename = "slideshow.js"
content = """
window.addEventListener('DOMContentLoaded', function () {
  simpleslider.getSlider();
})
"""

[[resources.css]]
filename = "https://unpkg.com/img-comparison-slider@7/dist/styles.css"


[examples.regular]
title = "Regular"
jinja = """
{{ ["https://picsum.photos/700", "https://picsum.photos/701"] | MkImageSlideshow }}
"""

[output.html]
template = """
<div style="width: 100%; padding-bottom: 25%" data-simple-slider="">
{% for image_url in node.images %}
  <img src="{{ image_url }}">
{% endfor %}
</div>
"""
mknodes.basenodes.mkimageslideshow.MkImageSlideshow
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class MkImageSlideshow(mktemplate.MkTemplate):
    """Node to show an Image slideshow (in autoplay mode)."""

    ICON = "material/image-multiple"
    JS_FILES = [resources.JSFile(JS_URL), resources.JSText(SCRIPT, "slideshow.js")]

    def __init__(
        self,
        images: list[str],
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            images: A list of image URLs to use for the slideshow
            kwargs: Keyword arguments passed to parent
        """
        super().__init__("output/html/template", **kwargs)
        self.images = images