0

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

illidan
  • 15
  • 5

1 Answers1

1

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".

StefanoTrv
  • 199
  • 7
  • thank you! moving
    outside the for loop and moving all the closing div tags inside the loop solved the problem where the second item was small, now i need to somehow stop owl from cloning my items when there are less than five of them
     – illidan Jan 15 '23 at 18:05
  • About that problem, I could only find [this question](https://stackoverflow.com/questions/33119078/cloned-items-in-owl-carousel ) (and variations of the same question), but you've probably already seen it. I'm sorry I can't be of more help on this particular issue, but I've never used this tool. – StefanoTrv Jan 15 '23 at 18:20
  • Thank you very much for answering my question, I'm still looking for a way to stop the cloning thing but the main problem was displaying the items correctly since I'm going to have more than five items anyways. – illidan Jan 16 '23 at 05:31