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.

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