MkImageSlideshow
Node to show an Image slideshow (in autoplay mode).¶
Example: Regular¶
Name | Children | Inherits |
---|---|---|
MkTemplate mknodes.templatenodes.mktemplate Node representing a jinja template. |
graph TD
94596169868240["mkimageslideshow.MkImageSlideshow"]
94596168228624["mktemplate.MkTemplate"]
94596169139824["mkcontainer.MkContainer"]
94596169136704["mknode.MkNode"]
94596171773984["node.Node"]
139930746687680["builtins.object"]
94596168228624 --> 94596169868240
94596169139824 --> 94596168228624
94596169136704 --> 94596169139824
94596171773984 --> 94596169136704
139930746687680 --> 94596171773984
/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>
"""