Nov 18 - HTML/CSS Slideshow

After creating the menu bar for my website, I now need to create the picture slideshow on our (me and my client's) website. At first, I was unsure on how to create the interactive picture slideshow. There were 2 options that I could choose from: using JavaScript in the html document, or using CSS to create the slideshow. After some research, I decided to use the CSS option since I was most familiar with this option, compared to using JavaScript. I found this tutorial (http://cssdeck.com/labs/css3-image-slider) that helped me to create my CSS slideshow for me and my client's website. Looking at the code, I figured out how to structure my CSS Slideshow. On the HTML section of the CSS Slideshow, I had to add a section of code which would lay out the tools needed to shape the slideshow:

The <div> on the top, slideshow-wrap, is the wrapper which contains everything inside the slideshow. The different buttons are radio buttons, which are unique because they would uncheck each other if one is selected. They are inside <label> tags to allow them to be labelled. The arrows on the bottom, are arrows which will be placed on each side of the picture, allowing the user to flick through the next/previous pictures. This tutorial uses ">"  as arrows, since it is the simplest option in HTML because they resemble arrows.

In the next part of this website, the <div> tags with the id "slideshow-inner" contain the different pictures which is set in an unordered list format. Each picture is a list item, which contains the image source (I haven't changed the image, since I prefer to use the pictures from the original tutorial which would allow me to easily compare the things I have done right/wrong in my code. There is also a checkbox, which is used to switch between pictures. When it is checked it will move the picture to the item. The checkbox synchronises with the arrows, so the indication on the checkbox radio buttons will change if the user uses the arrow to change picture, or simply clicks on the radio buttons to change the picture. I have yet to add something in to the slideshow_text, as it was modified from the original (description_text) and I would need to discuss with my client on what to write in there. There are 5 different pictures, and the structure of each slide is the same, except for the id names (eg. slide2, slide3) and the label "for".

With all the HTML tools added into this, I will start working on my CSS code next lesson, and look at the code in the tutorial at home so that I can change it to the preference of me and my client next lesson.