Search code examples
jquerydjangoowl-carousel

owl-carousel items which are looped through by Django aren't displayed correctly

let me start by saying that i have only done back end programming and have never used jquery before so i don't know how to setup owl carousel properly.

i have downloaded this html+css+js template for my project, it uses owl-carousel to show items from my database. i am passing all items as context from views.py to the template and am trying to show them all in a carousel. the first item works alright but the second one doesn't(i currently have only 2 items in my database) following is the code plus the picture of the current output:

<section class="product_area mb-60">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="product_header">
          <div class="section_title">
            <h2>تازه رسیده ها</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="glasses" role="tabpanel"> 
{% for product in products %}
       <div class="product_carousel product_column5 owl-carousel">
          <div class="single_product">
            <div class="product_thumb">
              <a class="primary_img" href="product-details.html">
                <img src="{{product.primaryURL}}" alt="">
              </a>
              <a class="secondary_img" href="product-details.html">
                <img src="{{product.secondaryURL}}" alt="">
              </a>
              <div class="action_links">
                <ul>
                  <li class="compare">
                    <a href="compare.html" title="مقایسه">
                      <i class="icon-repeat"></i>
                    </a>
                  </li>
                  <li class="quick_button">
                    <a href="#" data-toggle="modal" data-target="#modal_box" title="نمایش سریع">
                      <i class="icon-eye"></i>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="add_to_cart">
                <a href="cart.html" title="افزودن به سبد">افزودن به سبد</a>
              </div>
            </div>
            <div class="product_content">
              <p class="manufacture_product">
                <a href="#">{{product.name}}</a>
              </p>
              <h4>
                <a href="product-details.html">{{product.description}}</a>
              </h4>
              <div class="price_box">
                <span class="old_price">{{product.oldprice}}</span>
                <span class="current_price">{{product.newprice}}</span>
              </div>
            </div>
          </div> 
    {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
<!--product area end-->

and here is the result:

enter image description here

as you can see here,there are two problems, one is the items are being cloned, i searched on the internet and found some solutions like setting loop to false but it doesn't change anything (honestly i don't know jquery so i don't know if what I'm copy/pasting from stackoverflow is even correct in my case). The second problem is obviously that my second item is shown extremely small for some reason

Solution

  • Your "for" statement doesn't include completely all the "divs": some "divs" are opened in the body of the "for" and closed outside.

    Having taken a brief look at owlcarousel, it seems to me that <div class="product_carousel product_column5 owl-carousel"> should be outside the "for".