Unit08-ImageSlider
What you will learn.
You will learn how to build a responsive image slider that adapts to phone, tablet and desktops can see an example of this code in my DGM3265 course syllabus. I found the source code for this awesome, fully responsive jQuery slider plug-in at Woo Themes. Some of the features provided by this example are:
- Slider graphics scale with the browser so it works on phone, tablet, and desktop
- Supported in all major web browsers
- Horizontal/vertical slide and fade animations
- Touch swipe support on tablet and phone
- Free to use under the MIT license
Tutorials
In this series I will show you where I got the code for this great responsive slider and how I modified it to work on a page I build showing Chevy Trucks. At the time I made this tutorial, Chevy was using Flash to show these images and the page did not scale to mobile and of course flash does not work on any Apple mobile devices. Hopefully they will see this improvement and want to pay me $$$ to fix their site.
In part 1, I show where to download the jQuery for our slider as well as an example of where I used it in my own work.
In part 2, I show the process of creating the necessary slider graphics and buttons so I can build my own slider.
In part 3, I show how I added the code to the head and body of the document. Since I altered the paths I also show what to change to get everything working again.
In part 4, I show the CSS tweaks to et the picture caption functioning properly.
In part 5, I show how to change the image used in the navigation arrows as well as how to move them to the bottom.
In part 6, I added some content to the basic page to you could see the slider in context.
In part 7, I showed you the result after I spent some time off-line adjusting the CSS and the solution to one minor problem I ran into with the CSS.
Paul