Monday, February 12, 2018
Introduction
This tutorial is here to explain how to properly setup a carousel in your html document or project with the aid of Bootstrap software. A carousel is basically a slideshow in your web page that allows your user to see different selected visuals to better understand your product or service. A carousel can be a powerful tool to help your customers gain a greater understanding of what your web page is about. The official Bootstrap website defines it as the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. We will be giving credit to the developers at Bootstrap for providing free developing software and will now proceed to explain how to include a carousel in your web page.
Prepare the Next Components
- Your HTML Page Template Code
- Chrome Browser Installed and Working Internet Connection
- Locate your Root Files Directory
- An Extraction and Compression tool; winRAR or 7-Zip are great tools
Installing Bootstrap
IMPORTANT NOTE: For this procedure we will be using Bootstrap version 3.3.7 as this method has proved to work with this software version. A recommendation would be to use Google Chrome as your browser of choice since it is well known to have many important developing tools.
Follow the next instructions to start Bootstrap installation:
1. Open your browser and type in the next address https://getbootstrap.com/docs/3.3/getting-started/
2. Once you are on the website, there will be several options available. Click on the option near the navbar on the top of the page that says Customize. This will redirect you to another bootstrap page titled customize and download.
3. Next we will look for the JavaScript Components Section under the Less Files heading. As you go through the different check boxes, make sure to check the box for Carousel so that your Bootstrap can support your customization and then scroll all the way down to and click the Compile and Download button to download your bootstrap.
3a. As an optional note, if you are familiar with bootstrap and its components this whole page gives you the opportunity to customize your bootstrap with the options you prefer. If you don't feel comfortable enough to change any of the components, feel free to proceed with your download.
4. Once you hit the compile and download button, the file will begin downloading in the form of a .zip file. If you are on chrome, hit Ctrl+J to open your downloads and then after finding your download click on show in folder to find your file. If you are not on chrome then open file explorer and go to your downloads folder and find your file.
5. From here you will want to move the bootstrap zipped file onto your root directory in where you will be developing your web content. For our example we will be finding our root directory under the filepath /var/www
6. After placing your bootstrap file in your root directory, proceed to extract the file using your extracting tool by right clicking on the file and finding the extract option given by your extracting tool. Make sure the extraction happens while being inside the root folder and the new folder stays in the same directory.
Follow the next instructions to start Bootstrap installation:
1. Open your browser and type in the next address https://getbootstrap.com/docs/3.3/getting-started/
2. Once you are on the website, there will be several options available. Click on the option near the navbar on the top of the page that says Customize. This will redirect you to another bootstrap page titled customize and download.
Figure 1. Bootstrap Home Page
3. Next we will look for the JavaScript Components Section under the Less Files heading. As you go through the different check boxes, make sure to check the box for Carousel so that your Bootstrap can support your customization and then scroll all the way down to and click the Compile and Download button to download your bootstrap.
Figure 2. Bootstrap Customizing Menu
3a. As an optional note, if you are familiar with bootstrap and its components this whole page gives you the opportunity to customize your bootstrap with the options you prefer. If you don't feel comfortable enough to change any of the components, feel free to proceed with your download.
4. Once you hit the compile and download button, the file will begin downloading in the form of a .zip file. If you are on chrome, hit Ctrl+J to open your downloads and then after finding your download click on show in folder to find your file. If you are not on chrome then open file explorer and go to your downloads folder and find your file.
Figure 3. Downloads on File Explorer
5. From here you will want to move the bootstrap zipped file onto your root directory in where you will be developing your web content. For our example we will be finding our root directory under the filepath /var/www
6. After placing your bootstrap file in your root directory, proceed to extract the file using your extracting tool by right clicking on the file and finding the extract option given by your extracting tool. Make sure the extraction happens while being inside the root folder and the new folder stays in the same directory.
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.
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.
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 <!--Wrapper for slides--> 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.
<!-- Wrapper for slides -->
<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>
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.
<!-- Indicators -->
<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>
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.
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 <!--Wrapper for slides--> 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.
<!-- Wrapper for slides -->
<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.
<!-- Indicators -->
<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
Carousel Customization and Query Strings
IMPORTANT NOTE: For our example we will be using an approach to our query string from our dropdown menu, however, this could also work if you have different links connecting to a different display in your slideshow.
1. After implementing your carousel structure, you will have broken links to the default pictures, you will need to find pictures to place on your slideshow, a great resource to start at is www.pixabay.com. Make sure your pictures are not very high in quality, since they could potentially fill up your whole browser page.
2. After you have found some pictures to display, you will then want to change your code to include them. This is the code that you will be modifying and what it will look like on your page. Make sure you also modify your headers or delete them if you don't need them.
1. After implementing your carousel structure, you will have broken links to the default pictures, you will need to find pictures to place on your slideshow, a great resource to start at is www.pixabay.com. Make sure your pictures are not very high in quality, since they could potentially fill up your whole browser page.
2. After you have found some pictures to display, you will then want to change your code to include them. This is the code that you will be modifying and what it will look like on your page. Make sure you also modify your headers or delete them if you don't need them.
Figure 8. Image Implementation
3. Now we will proceed to the query list, as you can see in the previous code, your data-slides are indexed with the numbers 0 , 1 , 2 .. etc. After you locate those try to find the next code inside your dropdown menu or any sort of redirecting you might have setup that will link to the images in your carousel. For our example we have chosen to use a dropdown menu.
Figure 9. Query Strings
4. After locating your redirecting page, you will use the following syntax based on your slide index to query for a specific slide YourPageName.html?p=index. As you can see in our code snippet above, we have selected Projects.php?=0 as our indexing page. This will redirect us to our projects page and start our carousel off by displaying the parser scanner slide, which will look something like this.
<ul class="dropdown-menu">
<li ><a href="Projects.php?p=0"> Parser Scanner </a></li>
<li ><a href="Projects.php?p=1"> Tax Calculator </a></li>
<li ><a href="Projects.php?p=2"> Drone Footage </a></li>
</ul>
Figure 10. Query Display
Annotated List
- www.w3schools.com - Perfect place to begin learning about different tools and formats.
- www.bootstrap.com - Our customized bootstrap model will come from this site.
- www.pixabay.com - Great place to find images for our carousel without copyright troubles.
- www.stackoverflow.com - Found appropriate query string and troubleshooting to bugs.
- https://www.canva.com/learn/website-color-schemes/- Great article that will help you design a more visually appealing webpage
- https://www.youtube.com/watch?v=dD2EISBDjWM&list=PLr6-GrHUlVf_ZNmuQSXdS197Oyr1L9sPB - Basic HTML tutorials that might help troubleshoot and guide you to use proper coding patterns.
- www.google.com - One of the best search engines to find information related to any topic you need to learn about
Subscribe to:
Comments (Atom)