


<section >
    <div class="owl-carousel">
        <div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
        <div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
        <div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
        <div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
        <div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
        <div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
        <div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
        
    </div>
</section>
<script>
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        loop: true,
        nav: true,
        margin: 10,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            960: {
                items: 5
            },
            1200: {
                items: 6
            }
        }
    });
    owl.on('mousewheel', '.owl-stage', function (e) {
        if (e.deltaY > 0) {
            owl.trigger('next.owl');
        } else {
            owl.trigger('prev.owl');
        }
        e.preventDefault();
    });
</script>

@code {
 
}
