Search code examples
c#jqueryowl-carousel

owl carousel doesn't show the items of it

I have used Owl-carousel in a simplest way.

<div class="row  margin-zero">
     <div class="col-lg-10 col-md-10 col-sm-10 p-0 mx-auto ">
         <div  id="owl-demo">
            @if (Model.CarrouselImages.Count > 0)
            {
                foreach(var item in Model.CarrouselImages)
                {
                    <div class="item"><img src="~/@item.Src" alt="Owl Image"></div>
                }
            }
        </div>
     </div>
</div>

so it loads 6 items for item carousel

this is for csss

.margin-zero{
margin:0px !important;
}

#owl-demo .item {
margin: 1px;

}

#owl-demo .item img {
    display: block;
    height: auto;
}

and this is for css

 @section Scripts{
 <script type="text/javascript" src="~/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {

 $("#owl-demo").owlCarousel({ 
  items : 6,   
 });

});
</script>
}

but I view the website it doesn't show any item of carousel(although they are in source code) but not in view site

where could be the problem

Solution

  • The problem was that I had this in html tag

    <html dir="rtl">

    that's prevent owl carousel to work correctlt