CODEWITHSUNDEEP
pythondjangotwitter-bootstrap
iampj
iampj

Reputation: 203

Bootstrap Carousel Implementation in Django

I am trying to implement the twitter bootstrap 3 slideshow into a template, however, I cannot set the flag variable. The first div requires a class of active item, and the rest should just have an item class. How can I best achieve this in a for loop?

{% for review in reviews|slice:":3" %}
    <div class="carousel-inner">

    {% if forloop.counter0|divisibleby:"3" %}
     <div class="active item">
    {% else %}
    <div class="item">
    {% endif %}
    <blockquote>
         <p>{{ review.description }}</p>
    </blockquote>
    <label>{{ review.business }}</label>
    </div>
{% endfor %}

What I have already tried:

Upvotes: 7

Views: 16639

Answers (3)

roshandeep singh
roshandeep singh

Reputation: 565

Try this out. Ignore the extra styling (relevant for my problem only)

# Views.py
events = master_table.objects.all()
events = [events[i:i + 3] for i in range(0, len(events), 3)]


# template.html
<div id="" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner" role="listbox">
            {% for sublist in events %}
            <div class="carousel-item {% if forloop.counter0 == 0 %}active{% endif %}">
                <div class="cards-wrapper">
                    {% for event in sublist %}
                    <div class="card {% if forloop.counter0 != 0 %}d-none d-md-block{% endif %}">
                        <img src="{% static 'images/football.jpg' %}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">{{event.event_title}}</h5>
                            <p class="card-text">{{event.description}}</p>
                            <a href="#" class="btn btn-primary" style="background: #ff6f3d; border: none;">Details</a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
                data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
                data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

<style>
.cards-wrapper {
  display: flex;
  justify-content: center;
}

.carousel-inner {
  padding: 1em;
}
.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}


</style>

Upvotes: 0

souleymane
souleymane

Reputation: 1

<div class="carousel-inner" role="listbox">
    {% for agent in agents %}
    <!-- item -->
        <div class="carousel-item text-center text-light mb-5 {% if forloop.first %} active{% endif %}">
            <img src="{{ agent.image.url }}" class="img-fluid rounded-circle mb-3" width="150">
            <p class="px-3">{{ agent.description }}</p>
        </div>
    <!-- end item -->
    {% endfor %}
</div>

Upvotes: -1

simopopov
simopopov

Reputation: 852

Try this:

<div class="carousel-inner">
{% for review in reviews|slice:":3" %}
    {% if forloop.first %}
        <div class="active item">
    {% else %}
        <div class="item">
    {% endif %}
        <blockquote>
            <p>{{ review.description }}</p>
        </blockquote>
        <label>{{ review.business }}</label>
    </div>
{% endfor %}
</div>

forloop.first is True if this is the first time through the loop

Upvotes: 19

Related Questions