Files
InvenTree/docs/_includes/carousel.html
T
Oliver 19dfb81bfb [docs] Zensical docs (#13253)
* add zensical workflow

* rebuild schema dynamically

* load in new module

* Use zensical for docs invoke tasks

* modern

* improved carousel layout

* Increased content width

* fix for app icons

* Ensure schema dir exists

* remove unused requirement

* update readthedocs process

* fix polar.sh link

* adjust link checker pattern

* Revert some of the original style

* remove legacy mkdocs requirements

* fix for ready.py

* reduce db warnings during schema generation

* Adjust padding

* fix index issues

* fix page title

* fix pages with broken or missing headers

* split data import API schema

* cleanup old carousel

* remove djlint link
2026-11-14 22:34:18 +11:00

51 lines
1.5 KiB
HTML

<div class='splide'>
<div class='splide__track'>
<ul class='splide__list'>
{% for img in listimages(directory) %}
{% with src=img %}
{% include "splide_image.html" %}
{% endwith %}
{% endfor %}
</ul>
</div>
</div>
<script>
// With navigation.instant, page content is swapped in without a new
// DOMContentLoaded event, so mount immediately if the document has loaded
(function () {
function mountCarousel() {
if (window.carouselInstance) {
window.carouselInstance.destroy();
}
window.carouselInstance = new Splide(
'.splide', {
type: 'loop',
perPage: {{ per_page }},
autoplay: true,
pagination: false,
// Each slide is as wide as its image, so that all images
// are scaled to the same height (set in extra.css)
autoWidth: true,
height: '{{ height | default("14rem") }}',
breakpoints: {
// Narrow screens (e.g. mobile)
700: {
height: '{{ mobile_height | default("8rem") }}',
},
},
gap: '1rem',
focus: 'center',
}
).mount();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', mountCarousel);
} else {
mountCarousel();
}
})();
</script>