Bootstrap Carousel: Carousel Source Code

IMPORTANT NOTE: Although there are many carousel templates online to use, we have to make sure our carousel is compatible with our bootstrap. Therefore, the example we will be using, which is available through www.w3schools.com, will be compatible with bootstrap. However, customization will have to happen since we will be downloading a template only.

1. On your browser, type in the next address https://www.w3schools.com/bootstrap/bootstrap_carousel.asp which will redirect you to the main template we will be using for our carousel.

Figure 4. Bootstrap W3schools

1a. W3Schools is one of the best resources for learning about the different tools that can be used while developing, make sure you take some time to explore the different resources this website has to offer and cite them when using their software

2. This page includes different carousel types, for now we will be looking at the code under the How To Create a Carousel section and then we will then click on the Try it Yourself button to open a new tab with the carousel code ready for implementation.

Figure 5. Try it Yourself Button

3. Take some time to familiarize yourself with the code implemented. Notice the different tags implementing the images the carousel is using as you will be editing those in your carousel to display your selected images. They are located under the comment  comment and the picture names are highlighted for you to see where you will include your picture. A great recommendation would be to change the alt component with a name description of your picture.


  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

Figure 6. Carousel Source Code

3a. Another important part to become acquainted with in this code is the query order, as you will be using this to call from your query string to relate to your slideshow. This will be found inside the <ol> tags for every <li> tag used to include a component of the list. Additionally, remember the ID of your carousel, in this code the ID used is myCarousel to refer to it.


  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0"class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

Figure 7. MyCarousel ID Location

4. After becoming acquainted with the code, copy the whole code template provided into your HTML page structure inside your <body> tag to implement your carousel.

Bootstrap Carousel

Monday, February 12, 2018

Carousel Source Code

No comments:

Post a Comment