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
94875593663728["mkimageslideshow.MkImageSlideshow"]
94875592700464["mktemplate.MkTemplate"]
94875590900096["mkcontainer.MkContainer"]
94875594508576["mknode.MkNode"]
94875592833088["node.Node"]
140216716431552["builtins.object"]
94875592700464 --> 94875593663728
94875590900096 --> 94875592700464
94875594508576 --> 94875590900096
94875592833088 --> 94875594508576
140216716431552 --> 94875592833088
/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>
"""