slider

Slider

To practice Javascript I have been doing a Slideshow project and I achieved one that work with 2 buttons and changing the display property, but now it's time to make one more complex, that has the possibility to add images and use transition properties.

Background

Previously we made a version1 that only has a frame with images that has the same measures and they were controlled by using the display property.{{explain why is more complex}}

Problem

How to contain images and be able to dynamically add more with different measures.

Constrains

• The images need to have their own box container.
• All the individual images containers measures are the same as the others.
• The individual images containers need to be arranged horizontally.
• Each image must resize to fit.
• The images can't be streched or distorted.

Assumptions

• You can add more images from the HTML code, but we won't have the possibility to add them in the interface.
• Everything has a container.

Hypothesis

By setting an individual box for each image that will have the same measure as the viewport and let them float in their own container.

##Solution proposal

• For the images individual box

  • We can contain each image in a li tag setting the same measures with a class.

• For the boxes container

  • We can contain all the li as floating elements in the ul item to have them in arrange horizontal.

• For the main container

  • We can wrap everything in a div element that will serve as a viewport, and we'll need to set the same dimensions as the individual boxes.

           +-----------------------------------------------+
           |                     div                       |
           | +-------------------------------------------+ |
           | |                    ul                     | |
           | | +-------+-------+-------+-------+-------+ | |
           | | |  li   |  li   |  li   |  li   |  li   | | |
           | | | +---+ | +---+ | +---+ | +---+ | +---+ | | |
           | | | |img| | |img| | |img| | |img| | |img| | | |
           | | | +---+ | +---+ | +---+ | +---+ | +---+ | | |
           | | |       |       |       |       |       | | |
           | | +-------+-------+-------+-------+-------+ | |
           | |                                           | |
           | +-------------------------------------------+ |
           |                                               |
           +-----------------------------------------------+

• For adding more images

  • We can be able to add more images from the HTML code, to have more control, it only will be necessary to add a new li tag with a img element inside.

• For changing the viewport measures

  • It will need to change the dimentions of the li and the div viewport dimentsions.

Theory of Operation

Since the page is loaded, one function will read the width of the individual boxes and it will multiply by the number of images that it has, to know the width that need to set to the ul container. After this, all the images will show in the horizontal way in the same container.

+-------------------+
|        Page       |
|        Load       |
+---------+---------+
          |
+---------v---------+
|function that read |
| the width of the  |
| individual boxes  |
| and multiply for  |
|  the number of    |
|images that it has |
|                   |
+---------+---------+
          |
+---------v----------+
| The same function  |
|  set the obtained  |
|  values to the ul  |
|   container div    |
+---------+----------+
          |
+---------v----------+
|   The images are   |
|    displayed in    |
| arrange horizontal |
+--------------------+

Functional specification

We'll use our images like list items and wrap them in differents containers.

The images

To fill the box the images will have the max width and heigth as 100%.

The individual box containers

These will use the property float to achieve the arrange horizontal, and will have the same measures.

The Container for all the images

This will read the width of one individual box and it'll multiply by the quantity of boxes (li), to set its width property.

The div container

this will be tha viweport fame, and we'll use it to center the first image at the window.

Technical spec

Elements

The elements that we'll need for this are

• One div
• One unorder list container
• One list item for each image that we'll have with its img tag inside

 <div>
     <ul>
         <li><img></li>
         <li><img></li>
         <li><img></li>
         <li><img></li>
     </ul>
 </div>

We'll apply style to our elements and to get the possibility to add more images we will need a script. We'll start from the inside to the outside wrappers.

Images

Each image need to fill their conteiner but without be strech, so for that we just need to set the max height and width.

img {
    max-width: 100%;
    max-height: 100%;
    }

List items (image's individual boxes)

We set the proportions for the each frame. Also to have a better presentation we'll center the image with display flex and let the images be side by side letting them float.

 li {
    height: 400px;
    width: 400px;
    display: flex;
    justify-content: center; 
    align-items: center;
    float: left;
 }

List Container

With this container we'll need to know the how many images we have and the width of their boxes to set the width of this container.

First (after the DOM is loaded) we need to get the width of each individual box and multiply it by the number of images that we have, then we set this value to the List Container:

function setContainerWidth() {
	var container, listItems, width;

  container = document.getElementsByTagName("UL")[0];
  listItems = document.getElementsByTagName("LI");
  width     = listItems[0].offsetWidth * listItems.length;
  
  container.style.width = width + "px";
}

setContainerWidth();

To be sure that our container is in the right position we set the margins and paddings as 0;

ul {
    margin: 0px;
    padding: 0px;
}

The div container

For this we need to set the same measures as the indivitual boxes (for the window that we want to show) and we will apply some style to be centered and have a border.

div {
    height: 400px;
    width: 400px;
    border: solid 5px #fff;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    /* overflow: hidden; */
}

Dependencies

We have 3 components in here:

DOM elements - depends of the stylesheet to have the desired appearance

The style sheet - depends for the DOM to find the elements in which will apply the style.

The script file - it needs to the DOM to get the elements, calculate the desired width and apply it.

Operating ranges

• Both, the viewport and the individual boxes needs to have the same measures.
• To change the measures of the viewport you must chage the dimensions of the individual boxes and the div container.

Execution flow

Test cases

• It shows all the images in arrage horizontal?
• The width of the ul container is the result as the width of the individual boxes and the total of images.
• If an images is added the width of the ul container will change to avoid the arrange horizontal?
• The viewport container is centered?
• The images start from the center of the page, in the same position as the viewport container
• The images are inside their individual boxes?
• The images aren't stretch or distorted?