How to limit data in html using django template? - django

Question

I am using bootstrap carousel and i am using for template to iterate through data but i want two data at once so i wanted to do was if data exceeds 2 i want to display nothing after that can some one tell me how to do it.
<section id="latest-trip">
<div class="container">
<div class="row col-md-12">
<!-- Latest trip left part(carousel part) Start -->
<div id="treaking-list" class="col-md-7 ml-4">
<div
id="carouselExampleIndicators-three"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
{% for tour in tours %}
<div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
<div class="row">
{% for tour in tours %}
<div class="treaking col-md-6">
<img
src="{{tour.image}}"
alt="Real Adventure Nepal - {{tour.tour_name}}"
title="{{tour.tour_name}}"
/>
<div class="treaking-head">
<h3>{{tour.tour_name}}</h3>
<p>
{{tour.description}}
</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Latest trip left part(carousel part) End -->
<!-- Latest trip right part(Description part) Start -->
<div class="col-md-4 ml-5 title">
<h2 class="treaking-title">Latest Trips</h2>
<span class="right-styled-para">Explore the unexplored world</span>
<p class="treaking-description">
Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
veniam quiso.
</p>
<button type="button" class="btn btn-primary join-us">
Join us now
</button>
</div>
<!-- Latest trip right part(Description part) End -->
</div>
</div>
</section>
What is Currently happening is that the data are going down and same thing keeps going on in carousel :

Answer 1

<section id="latest-trip">
<div class="container">
<div class="row col-md-12">
<!-- Latest trip left part(carousel part) Start -->
<div id="treaking-list" class="col-md-7 ml-4">
<div
id="carouselExampleIndicators-three"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
{% for tour in tours[:2] %}
<div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
<div class="row">
{% for tour in tours %}
<div class="treaking col-md-6">
<img
src="{{tour.image}}"
alt="Real Adventure Nepal - {{tour.tour_name}}"
title="{{tour.tour_name}}"
/>
<div class="treaking-head">
<h3>{{tour.tour_name}}</h3>
<p>
{{tour.description}}
</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Latest trip left part(carousel part) End -->
<!-- Latest trip right part(Description part) Start -->
<div class="col-md-4 ml-5 title">
<h2 class="treaking-title">Latest Trips</h2>
<span class="right-styled-para">Explore the unexplored world</span>
<p class="treaking-description">
Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
veniam quiso.
</p>
<button type="button" class="btn btn-primary join-us">
Join us now
</button>
</div>
<!-- Latest trip right part(Description part) End -->
</div>
</div>
</section>
Adding [:2] after tours will resolve it. See my above answer.