{% if fullwidth %}
<div class="ts-landingpage-carousel">
    <div id="ts_carousel_{{rand}}" class="carousel slide" data-ride="carousel" data-interval="{{ interval }}">
        {% if indicators %}
        <ol class="carousel-indicators">
            {% for imageIndicators in sliderimages %}
            <li data-target="#ts_carousel_{{rand}}" data-slide-to="{{loop.index0}}" {% if loop.first %}class="active"{% endif %}></li>
            {% endfor %}
        </ol>
        {% endif %}
        <div class="carousel-inner">
            {% for image in sliderimages %}
            <div class="carousel-item {% if loop.first %}active{% endif %}">
                <img class="d-block w-100 img-fluid" src="{{image.src}}" alt="{{image.alt}}">
                {% if imagetext[loop.index0] != "" or imageheadline[loop.index0] != "" %}
                <div class="carousel-caption d-none d-block text-left">
                    {% if imageheadline[loop.index0] != "" %}
                    <h1 style="color: #{{imageheadlinecolor}}">{{imageheadline[loop.index0]}}</h1>
                    {% endif %}
                    {% if imagetext[loop.index0] != "" %}
                    <p style="color: #{{imagetextcolor}}">{{imagetext[loop.index0]}}</p>
                    {% endif %}
                    {% if link[loop.index0] != ""%}
                    <a href="{{link[loop.index0]}}" class="btn btn-info py-2" target="_blank">{{linktext[loop.index0]}} »</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
            {% if controls %}
            <a class="carousel-control-prev" href="#ts_carousel_{{rand}}" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#ts_carousel_{{rand}}" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            {% endif %}
        </div>
    </div>
</div>

<style>
    .ts-landingpage-carousel .carousel .carousel-item {
        height: 800px;
    }

    .ts-landingpage-carousel .carousel-caption {
        width: 25% !important;
        line-height: 1.8;
        margin-bottom: 15% !important;
    }

    .ts-landingpage-carousel .carousel-item img {
        object-fit: cover;
        min-height: 800px;
    }

    @media only screen and (max-width: 1024px) {
        .ts-landingpage-carousel .carousel .carousel-item {
            height: 600px;
        }

        .ts-landingpage-carousel .carousel-item img {
            min-height: 600px;
        }
    }

    @media only screen and (max-width: 768px) {
        .ts-landingpage-carousel .carousel .carousel-item {
            height: 400px;
        }

        .ts-landingpage-carousel .carousel-item img {
            min-height: 400px;
        }

        .ts-landingpage-carousel .carousel-caption {    
            width: 70% !important;
            line-height: 1.6;
            margin-bottom: 0% !important;
            top:0;
        }
    }
</style>

{% else %}
    <div class="container">
        <div class="row">
            <div id="ts_carousel_{{rand}}" class="carousel slide w-100" data-ride="carousel" data-interval="{{ interval }}">
                <div class="carousel-inner" role="listbox">
                    {% for image in sliderimages %}
                    <div class="carousel-item {% if loop.first %}active{% endif %}">
                        <div class="col-12 col-sm-12 col-md-{{ amount }} col-xl-{{ amount }}">
                            <div class="card card-body {{ border }}">
                                <img class=" mx-auto mw-100" src="{{image.src}}" alt="{{image.alt}}">
                            </div>
                        </div>  
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>


<script>
jQuery(document).ready(function () {
    
    jQuery('#ts_carousel_{{rand}}'), function (e) { 
        if(jQuery(this).attr("data-interval") != ""){
             setInterval = jQuery(this).attr("data-interval");

            jQuery('#ts_carousel_{{rand}}').carousel({
             interval: setInterval
            })
        } 
    }

    jQuery('#ts_carousel_{{rand}} .carousel-item').each(function () {
        var minPerSlide = 6;
        var next = jQuery(this).next();
        if (!next.length) {
            next = jQuery(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo(jQuery(this));

        for (var i = 0; i < minPerSlide; i++) {
            next = next.next();
            if (!next.length) {
                next = jQuery(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo(jQuery(this));
        }
    });


});
</script>



{% if amount == 12%}
<style>
    /* display 1 */
    @media (min-width: 768px) {

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-right.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-next {
            transform: translateX(100%);
        }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-left.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-prev {
            transform: translateX(-100%);
        }
    }
</style>

{% elseif amount == 6 %}
<style>
    /* display 2 */
    @media (min-width: 768px) {

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-right.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-next {
            transform: translateX(50%);
        }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-left.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-prev {
            transform: translateX(-50%);
        }
    }
</style>


{% elseif amount == 4 %}
<style>
    /* display 3 */
    @media (min-width: 768px) {

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-right.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-next {
            transform: translateX(33.333%);
        }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-left.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-prev {
            transform: translateX(-33.333%);
        }
    }
</style>


{% elseif amount == 3 %}
<style>
    /* display 4 */
    @media (min-width: 768px) {

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-right.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-next {
            transform: translateX(25%);
        }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-left.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-prev {
            transform: translateX(-25%);
        }
    }
</style>

{% elseif amount == 2 %}
<style>
    /* display 6 */
    @media (min-width: 768px) {

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-right.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-next {
            transform: translateX(16.666%);
        }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-left.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-prev {
            transform: translateX(-16.666%);
        }
    }
</style>
{% endif %}

<style>

    @media (max-width: 768px) {
        #ts_carousel_{{rand}} .carousel-inner .carousel-item>div {
            display: none;
        }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item>div:first-child {
            display: block;
        }
    }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item.active,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-next,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-prev {
            display: flex;
        }

        #ts_carousel_{{rand}} .carousel-inner .carousel-item-right,
        #ts_carousel_{{rand}} .carousel-inner .carousel-item-left {
            transform: translateX(0);
        }

        #ts_carousel_{{rand}} .carousel-item img {
            object-fit: contain;
            min-height: auto;
            margin-bottom: 0px;
        }

        #ts_carousel_{{rand}} .carousel-item .card.card-body {
            height: 200px;
        }

        #ts_carousel_{{rand}} .carousel-item .card {
            flex-direction: unset !important;
        }
</style>

{% endif %}
