Coming back to our new site design, the next thing we’ll do is add in some cool Star Wars pictures that auto-rotate (like a slideshow) across the main page. This is done with the Boot-
strapcarouselcontrol. Since we have everything we need at this point in thebase.htmlfile,
let’s put the carousel in ourindex.htmlfile.
Here’s some example code:
1 {% extends 'base.html' %} 2 3 {% block content %} 4 5 {% load static %} 6 7 <center>
8 <section id="myCarousel" class="carousel slide"
data-ride="carousel" style="max-width: 960px;"> 9 <!-- Indicators -->
10 <ol class="carousel-indicators">
11 <li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
12 <li data-target="#myCarousel" data-slide-to="1"></li> 13 <li data-target="#myCarousel" data-slide-to="2"></li> 14 </ol>
15 <div class="carousel-inner"> 16 <figure class="item active">
17 <img src="{% static 'img/darth.jpg' %}" alt="Join the Dark Side" style="max-height: 540px;">
18 <figcaption class="carousel-caption"> 19 <h1>Join the Dark Side</h1>
20 <p>Or the light side. Doesn't matter. If your into Star Wars then this is the place for you.</p>
21 <p><a class="btn btn-lg btn-primary" href="{% url 'register' %}" role="button">Sign up today</a></p> 22 </figcaption>
23 </figure>
25 <img src="{% static 'img/star-wars-battle.jpg' %}"
alt="Wage War" style="max-height: 540px;"> 26 <figcaption class="carousel-caption">
27 <h1>Wage War</h1>
28 <p>Daily chats, Weekly Gaming sessions, Monthly real-life battle re-inactments.</p>
29 <p><a class="btn btn-lg btn-primary" href="#" role="button">I'm ready to fight</a></p> 30 </figcaption>
31 </figure>
32 <figure class="item">
33 <img src="{% static 'img/star-wars-cast.jpg' %}"
alt="Meet People" style="max-height: 540px;"> 34 <figcaption class="carousel-caption">
35 <h1>Meet fellow Star Wars Fans</h1>
36 <p>Join forces with fellow padwans and Jedi who lives near you.</p>
37 <p><a class="btn btn-lg btn-primary" href="#" role="button">Check the Members Map</a></p> 38 </figcaption>
39 </figure> 40 </div>
41 <a class="left carousel-control" href="#myCarousel"
data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
42 <a class="right carousel-control" href="#myCarousel"
data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 43 </section>
44 </center> 45
46 {% endblock %}
That’s a fair amount of code there, so let’s break it down into sections.
1 <section id="myCarousel" class="carousel slide"
data-ride="carousel"> 2 <!-- Indicators -->
3 <ol class="carousel-indicators">
4 <li data-target="#myCarousel" data-slide-to="0"
5 <li data-target="#myCarousel" data-slide-to="1"></li> 6 <li data-target="#myCarousel" data-slide-to="2"></li> 7 </ol>
1. The first line is the HTML5 section tag, which is just separating the carousel as a
separate section of the document. The attributedata-ride="carousel"starts the
carousel animation on page load.
2. The ordered listoldisplays the three dots near the bottom of the carousel that indicate
which page of the carousel is being displayed. Clicking on the list will advance to the associated image in the carousel.
The next section has three items that each correspond to an item in the carousel. They all behave the same, so let’s just describe the first one, and the same will apply to all three.
1 <figure class="item active">
2 <img src="{% static 'img/darth.jpg' %}" alt="Join the Dark Side"> 3 <figcaption class="carousel-caption">
4 <h1>Join the Dark Side</h1>
5 <p>Or the light side. Doesn't matter. If you're into Star Wars then this is the place for you.</p>
6 <p><a class="btn btn-lg btn-primary" href="{% url 'register' %}" role="button">Sign up today</a></p>
7 </figcaption> 8 </figure>
1. figureis another HTML5 element that we haven’t talked about yet. Like the section elements, it is intended to provide some semantic meaning to the page:
NOTE: Thefigureelementrepresents a unit of content, optionally with a
caption, which is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
2. Just like with the HTML5 section tags, we are replacing the overuseddivelement with
an elementfigurethat provides some meaning.
3. Also as a sub-element of the figure we have the<figcaption>element which repre-
sents a caption for the figure. In our case we put the “join now” message an a link to the registration page in our caption.
The final part of the carousel are two links on the left and right of the carousel that look like
>and<. These advance to the next or previous slide in the carousel, and the code for these
links look like:
1 <a class="left carousel-control" href="#myCarousel"
data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
2 <a class="right carousel-control" href="#myCarousel"
data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
Finally, create an “img” folder within the “static” folder, and then grab the star-wars-
battle.jpg,star-wars-cast.jpg, anddarth.jpgimages from the “chp08” folder in the exercise
repoand them to that newly created “img” folder.
And that’s it. You now have a cool carousel telling visiting younglings about the benefits of joining the site.