<div id="nh-brands">
    <div class="container">
        <div class="owl-carousel brands-banner owl-theme">
            {% for banner in banners %}
                <div>
                    {% if banner.link %}
                        <a href="{{ banner.link }}">
                            <img src="{{ banner.image }}" alt="{{ banner.title }}" title="{{ banner.title }}" width="{{ banner.width }}px" height="{{ banner.height }}px" class="img-responsive"/>
                        </a>
                    {% else %}
                        <img src="{{ banner.image }}" alt="{{ banner.title }}" title="{{ banner.title }}" width="{{ banner.width }}px" height="{{ banner.height }}px" class="img-responsive"/>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.brands-banner').owlCarousel({
            responsiveClass: true,
            dots: false,
            loop: true,
            autoplay: true,
            responsive: {
                0: {
                    items: 3
                },
                768: {
                    items: 6
                },
                992: {
                    items: 9
                }
            }
        });
    });
</script>