-
Notifications
You must be signed in to change notification settings - Fork 0
buttons
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 havving the possibility to add images and use transition properties.
Previously we made a version1 and the buttons worked changing the display property selecting the items in an array.
How to control the movement of a slider to show the next or previous image with buttons?
- The images needs to move in horizontal way.
- The images must have the same width.
- Must be one right and one left button.
- The right button needs to move the slider to the left to show the right image.
- The left button needs to move the slider to the right to show the left image.
- When the last image is showing the slider must start from the first again and inversely.
- There is not specific design for the buttons.
By controling the right position of the image's boxes container, adding pixels when the right button is pressed or subtracting when the left is pressed.
##Solution proposal Knowing that all the images are in arrange horizontal, and they have the same width in the reel, then we can move the container of the images adding or substracting pixels to the right position (the same width of the images). With this we can show the images that are hidden.
If we press the rigth button, the container will add pixels to the right position to push the container to the left.
viewport
+------+------+------+------+------+------+
| | | | | | |
| <--+ img | img | img | img | img |
| | | | | | |
+------+------+------+------+------+------+
But if we press the button that is in the left, it will substract pixels to the right position to push the container to the right.
viewport
+------+------+------+------+-------------+
| | | | | | |
| img | img | img | img | img +----> |
| | | | | | |
+------+------+------+------+------+------+
To know when the container can't go further to one side because there aren't more images, we can use a script code that first get the width of one of the images, and then it multiply by the total of images that we have least one, this will show the last image in the reel. And by using a conditional, we can tell to the cointainer that it's at the end of possible adding or sustracting pixels to the right position, so it will reset to go to the opposite end side.
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 least one, to know what is the extreme right position that we can add to be in the last image in the container.
Then an event listeners tell us when one of the buttons are pressed and activate one of the corresponding function.
+------------+
| The DOM |
| is loaded |
+-----+------+
|
+-------v--------+
| It reads the |
| width of one |
| of the images |
| and it will |
| multiply by |
| the total |
| of images |
| least one |
+-------+--------+
|
+-------v--------+
| It will apply |
| the before |
| value to the |
| conditional |
| to indicates |
| where is the |
| last image |
+---+-------+----+
| |
+--------+ +---------+
| |
+--------v--------+ +---------v--------+
| | | |
| The left button | | The right button |
| is pressed | | is pressed |
| | | |
+-------+---------+ +---------+--------+
| |
+-----------v------------+ +-----------v------------+
| One function is | | One function is |
| activated and it will | | activated and it will |
| SUBSTRACT pixels to | | ADD pixels to the left |
| the right POSITION of | | POSITION of the |
| the container to move | | container to move it |
| it to the RIGHT | | to the LEFT |
| | | |
+----------+-------------+ +-----------+------------+
| |
+----------v-------------+ +-----------v------------+
| if there isn't more to | | if there isn't more to |
| SUBTRACT, the position | | ADD, the position |
| will be reset to the | | will be reset to zero |
| maximum width possible | | |
| The one that allow us | | |
| to see the last image | | |
+------------------------+ +------------------------+
First we get all the images contained in li elements.
Through a Pub/Sub Pattern the buttons publish when the click occurs, and the images container subscribes for this.
To know how many pixels are to move one step, a variable gets the width of one image container.
If the rigth button is pressed: we add the value of the variable width to the rigth position of the container, making the movement of this to the left.
viewport
+------+------+------+------+------+------+
| | | | | | |
| <--+ img | img | img | img | img |
| | | | | | |
+------+------+------+------+------+------+
If the left button is pressed: we substract the value of the variable width to the rigth position of the container, making the movement of this to the rigth.
viewport
+------+------+------+------+-------------+
| | | | | | |
| img | img | img | img | img +----> |
| | | | | | |
+------+------+------+------+------+------+
By getting the width of one of the li elements and multiplying by the total least one, it will reveal the last image that can be showed to the right.
Viewport
+-------+
+-----+-----+-----+-------------|
| img | img | img | img | last ||
| | | | | img ||
+-----+-----+-----+-------------|
+-------+
+--+--+
| ^
v |
width |
|
+----------+------------+
| |
v |
Total width |
least one +
By using a conditional we read the current right position of the image's container, (before to being modified by the buttons actions) we know if there are more space to go, or it will need to go to the oposite side.
Example: if we want to go to the right and we are in the last image, the right position will be reset to 0.
The images are setted in li that have the same dimensions, who in turn are in other container too.
<div>
<ul>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</div>
Publishers
- To know when the DOM is loaded.
- To know when the rigth button is pressed.
- To know when the left button is pressed.
Subscribers
- To get the elements and obtaind width and length values.
- To add pixels to the right position in the images container.
- To substract pixels to the right position in the images container.
By getting the li items as an array object and then reading the width of the first item to multiply this value by the array.length less one we know where the last image is.
VAR liItems = get all the li items of this project.
When the DOM is loaded:
liItems[0] width * (liItems.length -1);
Working as a Pub/Sub Pattern the buttons publish when the click occurs and depending of which one is pressed the callbacks will be activated.
Publiser: buttons onclick {
read the ID
SWITCH (ID){
rigth button: make rigth callback;
left button: make left callback;
}
}
To move the container the subsciber callbacks react with a conditional statement to know if there are more images to go to add or remove pixels to the right position.
FUNCTION rightButton
IF position is >= 0 and <= lastImagePosition
add oneItemWidth to the position variable
set THIS value to the ul tag container
ELSE
reset the position of the variable to = 0
set THIS value to the ul tag container
FUNCTION leftButton() {
IF position is >= oneItemWidth and <= lastImagePosition
substract oneItemWidth to the position variable;
set THIS value to the ul tag container
ELSE
Reset the position variable to the extreme left = lastImagePosition;
set THIS value to the ul tag container
We have 3 components in here:
- Both, the viewport and the image's containers needs to have the same measures.
+---------------------------+---------------------------+--------------------------+
| Model | View | Controller |
| (script) | (DOM) | (User) |
+----------------------------------------------------------------------------------+
| | | |
| | The DOM is loaded | |
| | and showed. | |
| | +----------------> Get the li elements |
| Store the li elements | | + |
| as a ^ariable with <--------------------------------------------+ |
| an array object | | |
| + | | Get the first item in |
| +--------------------------------------------> the array and read its |
| | | width |
| Store the width in | | + |
| a ^ariable with an <---------------------------------------------+ |
| inter as a ^alue | | |
| + | | |
| +--------------------------------------------> Require the array and |
| | | the width |
| | | + |
| | | | |
| | | v |
| | | Multiply the width for |
| | | (li.length + 1) |
| Stores the result as | | + |
| a ^ariable with <--------------------------------------------+ |
| an inter ^alue | | |
| + | | Set this ^alue as a |
| +--------------------------------------------> limit for the mo^ement |
| | | of the slide |
| | | + |
| Stores this limit <--------------------------------------------+ |
| | | |
+---------------------------+------------------------------------------------------+
| W A I T I N G F O R U S E R'S A|C T I O N S |
+---------------------------+------------------------------------------------------+
| | The user press one of | |
| | the buttons | Require the limit and |
| | +--------------> number of pixels to |
| | | move the container |
| It gives the stored data | | + |
| that is required <---------------------------------------------+ |
| + | | |
| +-------------------------------------------->Change the right position|
| | | of the image's container |
| | | + |
| | Display the new image <----------------+ |
| | | |
+---------------------------+---------------------------+--------------------------+
- The images are in arrange horizontal?
- The images has its own containers that have the same measures?
- The images are contained in the same place?
- When the user press the right button, it displays the image that is on the right?
- When the user press the left button, it displays the image that is on the left?
- When we are in the last right image and the right button is pressed, it shows the first left image?
- When we are in the first left image and the left button is pressed, it shows the last right image?