# exemplo de uso
# neste exemplo as marcas são mostradas dentro de um carrossel owlCarousel
{% set marcas = store.getBrands() %}
{% if marcas.items|length > 0 %}
<section id="marcas" class="block mb-3">
    <div class="central">
        <div class="itens owl-carousel owl-theme px-3">
            {% for marca in marcas.items %}
            <div class="item text-center bg-white p-2">
                <a href="{{ marca.marca_url }}">
                    {% if marca.logo %}
                    <img src="{{ marca.logo }}" alt="{{ marca.marca }}" />
                    {% else %}
                    <h6 class="marca">{{ marca.marca }}</h6>
                    {% endif %}
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    <script>
        $(function(){
            $('#marcas .itens').owlCarousel({
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true,
                loop: $('#marcas .itens .item').length > 3 ? true : false,
                dots: true,
                nav: false,
                margin: 15,
                animateOut: 'bounceOutLeft',
                animateIn: 'bounceInRight',
                responsive: {
                    0: {
                        items: 1,
                    },
                    598: {
                        items: 2,
                    },
                    800: {
                        items: 3,
                    },
                    1024:{
                        items: 4,
                    }
                }
            });
        });
    </script>
</section>
{% endif %}