GF Fluid Slideshow

A Lightweight Fluid Slideshow For A Responsive Website

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 https://lifetickler.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 https://lifetickler.com/gfslideshow/
// ***********************************************/
 </script> 
	

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