inventree-docs/_includes/carousel.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>
	document.addEventListener( 'DOMContentLoaded', function () {
		new Splide(
            '.splide', {
                type: 'loop',
                perPage: {{ per_page }},
                autoplay: true,
                pagination: false,
                // cover: true,
                // autoWidth: true,
                height: '25rem',
                focus: 'center',
                padding: {
                    left: '5rem',
                    right: '5rem',
                }
            }
        ).mount();
	} );
</script>