GF Fluid Slideshow

A Lightweight Fluid Slideshow For A Responsive Website

  • Android Samsung Galaxy Portrait 380x685
  • Crappy Android Portrait 240x300
  • iPad Landscape 1024x768
  • iphone 3+4 portrait 320x480

download GF Slideshow

Here is a slideshow that adjust based on the size of the parent div with a lightweight javascript footprint (just 2kb unminified). Although primarily created for use with GridFlair, GF slideshow may also be integrated with any responsive grid system. You may use this code in your project for free.

The following are the steps to integrate GF Slideshow in your responsive website:

Step One

Add the stylesheet in your own css file.

	/***********************************************
	// * GF Responsive Slideshow - (c) Jesse Veluz
	// * This notice MUST stay intact.
	// * You are free to use and modify.
	// * Visit http://jvcodex.com/gfslideshow/ 
	// ***********************************************/
	.GF_slide{}
	.GF_slide img {width:100%;height:auto;}
	.GF_slide ul{padding:0;margin:0;list-style-type:none;}
	.GF_slide ul li{display:none;}
	.GF_slide ul li img{background-color:#fff;}
	.GF_slideshow{position:relative;background-color:#fff;}
	.GF_slideshow img{position:absolute;left:0px;top:0px;display:none;background-color:#fff;width:100%;height:auto;}
	

Step Two

Add the images in the body using the ul tag

	<div class="GF_slide">
	 <ul>
		  <li><img alt="" src="path-to-the-image-file" /></li>
		  <li><img alt="" src="path-to-the-image-file" /></li>
		  <li><img alt="" src="path-to-the-image-file" /></li>
		  <li><img alt="" src="path-to-the-image-file" /></li>
		  <li><img alt="" src="path-to-the-image-file" /></li>
		  <li><img alt="" src="path-to-the-image-file" /></li>
		  <li><img alt="" src="path-to-the-image-file" /></li>
		  <li><img alt="" src="path-to-the-image-file" /></li>
	 </ul>
	</div>
	

Step Three

Add the following javascript before the closing </body> tag

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')
//]]>
</script>

<script type="text/javascript" src="js/GF_Responsive_Slideshow-v1/GF_slideshow-v1.js">
// ***********************************************
// GF Responsive Slideshow - (c) Jesse Veluz 
// If you use this script, this line MUST be kept 
// Visit http://jvcodex.com/gfslideshow/
// ***********************************************/
 </script> 
	


That's it! Use it. Customize it to your needs. Good luck!

Back to JVCodex Homepage

GF Slideshow is brought to you by Jesse Veluz.
GF Slideshow is licensed under Creative Commons Attribution 3.0 License. Special thanks to fotogrph for free images.