VIDEO 4: Responsive Slideshow

Responsive Slideshow Tutorial

Three things involved when integrating a jQuery plug-in into a project:

1. HTML
2. CSS
3. Javascript

Integrating Viljami Salminen’s Responsive Slides (slideshow) into a responsive web project:

http://responsive-slides.viljamis.com/

Follow these steps:

1. Download zip file located on GitHub

https://github.com/viljamis/ResponsiveSlides.js
(Save zip file in case you need to go back to original example)

2. Add the images for slideshow

Add the images you created for the slideshow to the images folder.

3. Follow instructions

Follow instructions on this page: http://responsive-slides.viljamis.com/

4. Add links to JavaScript files

Add links to JavaScript files in the head of the HTML file. Put the files in your js folder.

5. Add HTML

Add the unordered list for the slideshow to the HTML.

<ul> 
<li><img src="1.jpg" alt="" /></li> 
<li><img src="2.jpg" alt="" /></li> 
<li><img src="3.jpg" alt="" /></li> 
</ul>
6. Add CSS

Add css to the style.css file.

7. Add script to HTML

Add script to HTML before your closing body tag.

8. Test

Test your page, the slides should automatically fade in and out.

Example: http://www.cavanaugh.smcgrdes.com/grdes75/_html5/alima-media-queries-flexnav-jquery/final_web/

Comments (1)

Leave a Comment