Image credit goes to Daniel Zedda on Flickr. Next Slide and Previous Slide icons where created using icomoon.
This tutorial will only work on browsers that supports the most recent CSS3 features and this tutorial is not ready for production.
CSSThis demo its not responsive, this is why each element has a fixed size. The first element that we will write rules for is the '#slider' div:
This element will hold both the '#slider-panels' div, which will hold all 3 panels, as well as '#slider-dots', which will display the current slide and controls.
'.slider-dot' will be replicated to create one class for each image using jquery, it also has a css3 transition added for the background when the mouse hovers to make a smoother transition. '.slider-dot-current' is the class that will be added to each div '.slider-dot' to display the current slide.
Inside '#slider-panels' we will see '#slider-panel-images', which will be the place where we will put all the images we want in the slider. Those images will need to be 900px in width and 400 in height. We will set '#slider-panel-images' to invisible because we won't use this to display our images, this is just a place to put them all together and load them later into the page.
Next in line are the arrows that controls the current slide '#slider-panels-next' and '#slider-panels-previous'
Both elements have transition set in order to make the background fade in smoother when you hover over them. We have finally got to the most important part of our slider, those 3 panels. The left panel is called ‘#slider-panel-left’, the center ‘#slider-panel-center’ and finally right panel ‘#slider-panel-right’.
You will notice that I have set '#slider-panel-left-carousel' and '#slider-panel-right-carousel' width to 0px and '#slider-panel-center-carousel' height to 0px, the reason is that those values don't really matter, because they will be later set in jQuery to fit all the images.
The right and left panel will be moving horizontally - the left one will move from right to left and the right panel will move from left to right. The center panel will move vertically and not horizontally, that's why set the width and not the height, this panel will move from bottom to top.
You will ask yourself why I didn't made all the carousels to move from top to bottom or left to right and why I have used so many ID elements instead of creating 3 generic classes for all panels. The reason I chose to move the panels independently is to create a nicer transition, as for the ID vs Classes I made this decision in order to make it easier for you to identify which panel is which.
The ‘slideTiming’ variable will controls the time it takes before changing to the next slide, ‘animationTime’ is the animation duration between the slides, ‘controlsHideTime’ variable changes the time it takes for the next and previous buttons to hide, ‘current’ represents the current slide or the opening slide position.
Next we will take care of the arrows using jquery hover.
We will use check_slide() function to check the current position and animate the slider accordingly. The left panel will have it’s position animated to the right using animate function but using a negative values. The value is provided by multiplying the width of the slide with the ‘current’ variable that indicated the current slide minus 1 because we want to take into account the case where the ‘current’ will be on and the result will be 0 so the position won’t change. The same goes for the right tab but in opposite direction, with the center panel its a different story because i wanted the slide to move up and down not from side to side and we will change the top position to minus 400, the height of the panel with the ‘current’ minus 1.
The other thing that we have to do in this function is to first remove the class ‘.slider-dot-current’ from all ‘.slider-dot’ and then add ‘.slider-dot-current’ only to the appropriate position. You will see that we are using data-slide attribute in order to find the appropriate element that needs to be changed, i will talk later about this attribute.
We will now write the function that changes the slides both when you press the arrows or when the autochange function is activated this will also reset ‘current’ variable and summon check_slide(); function to change the slider.
Lets go ahead and add controls for the arrows also:
setInterval will take care of the automated slider switching:
In the next step we will be looping through the images located in ‘#slider-panel-images’ and append them in all of the 3 panels. We will also add the small dots at the bottom of the slider to display the current position of the slider. We are adding the attribute ‘data-slide’ to each ‘.slider-dot’ in order to identify and change the dots to display the current slide.
We will need to change the size of all 3 carousel that are filled with images. The side ones will need width adjustments and the center one will need height adjusted. We will also need to change the width ‘#slider-dots’ because it won’t stay centered if it doesn’t have a width.
The last thing we have to do is change the slide when someone is clicking on ‘.slider-dot’. We will do that by setting the variable ‘current’ equal to the number inside the attribute ‘data-slide’ and by calling the function check_slide()
We will have to call the check_slide() function one more time outside the click function because we also need to check the current slide when a page loads.