section owl carousel not working properly

Viewed 19

I am trying to create an educational website with django and in a specific section I want to show the courses available, so I used an owl-carousel for that. So far I have created two courses, and they are not being displayed properly. Basically the two courses are occupying five columns each one after another whereas there should only be two columns for the two courses in the carousel and when I will add more courses then there will be more columns added.

Here is how they are being displayed: enter image description here enter image description here

I don't want them this way, there should be two separate columns for two cards as there are two courses and I don't know how to fix it.

My code:

  <section class="section courses" data-section="section4">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="section-heading">
            <h2>Choose Your Course</h2>
          </div>
        </div>
        <div class="owl-carousel owl-theme">
          {% for course in courses %}
          <div class="item">
            <img src="{{ course.image }}" alt="Course #1">
            <div class="down-content">
              <h4>{{ course.title }}</h4>
              <p>{{ course.description }}</p>
              <div class="author-image">
                <img src="{{ course.instructor_image }}" alt="Author 1">
                {{ course.instructor }}
              </div>
              <br>
              <div class="button">
                <a href="{% url 'course' course.slug  %}">Get Enrolled <i class="fa fa-angle-double-right"></i></a>
              </div>
            </div>
          </div>
          {% endfor %} 
        </div>
      </div>
    </div>
  </section>

Thanks in advance!

0 Answers
Related