Save it, refresh the page and you see the slider has now two buttons

But you notice our main class, the white area around the slider is so big and it's looking ugly. I'm going to change the width of the main-class to 500px like such

Save it, refresh the screen and you see it looks much better now

Now we are going to write some jQuery in our script.js file and query the dom as shown below, also console.log(whichButton); just for demonstration purposes

 $(document).ready(function($){
   $('.nav button').on('click', function(){ 
   var whichButton = $(this).data('nav'); 
   console.log(whichButton);
   });
});

$(document).ready(function($){
  var imageWidth = $('.slider ul li').first().children('img').width(); console.log(imageWidth);
});

$(document).ready(function($){
var imageBox = $('.slider ul');
var imageWidth = $('.slider ul li').first().children('img').width();
var imageQuantity = $('.slider ul').children('li').length;

imageBox.css('width', imageWidth*imageQuantity);
console.log(imageWidth);
});

So when the next button is clicked, the function is going to run and the next image will load, make sure the code looks similar to the screenshot below

Save it, refresh the screen and now if you click the next button, the second image will show up. If you click the next button again, the third image will show up. But if you click the next button, the fourth image would have appeared but since we don't have any fourth image, it will look like similar to the screenshot below

We can arrange the code by putting it in the function and call it transition because it's actually transitioning the ul tag. 

Another good optimization to do when writing code is to structure the code in such a way that your functions are not accessing any global values but wherever the function is called, it passes the values that the function has to use. in the image below pxValue has two variables "currentImage" and the "imageWidth" I can pass these values inside the transition as shown below

The function is now isolated and can be copied and pasted in any JavaScript program and can be used. The code is reusable and better when you make bigger projects. 

One last thing I'm going to do is that we don't want to go to the blank page when the last image is clicked, I want to go to the first image when the last image is being viewed and clicked for the next one.

So I can say if the next button is clicked and the value of current image is imageQuantity (which is 3 in our case since we have 3 images) so in this case we want to set the currentImage value to 1 so the image goes to the first image

I'm also going to call the transition function as shown below but if it is not on the last image then we are going to use our old logic of incrementing the value and go to the next image

For the previous button, If the currentImage is on the first image and you hit the previous button then you want to go to the last image. Make sure you change the values as shown in the screenshot below.

Now if I save it, refresh the page and click buttons in the slider, it will work smoothly. If you're on the last image and hit next, it will take you to the first image and if you're on the first image and hit previous it will take you to the last image.

Grab the source code below and play around with the code and build your own slider. I hope you enjoyed this lesson. If you have any question, leave your comments below. I'll talk to you in the next lesson. Good bye :)