Features

  • Configurable time delay
  • Lazy loading of images
  • Pre-emptive loading of next image
  • Only display image when fully loaded
  • Configurable position of overlay

yasSlide - A simple Slideshow plugin for jQuery

I needed a simple and lightweight jQuery plugin to show a slideshow in a DIV. I couldn't find one that did what I wanted and so I created the yasSlide jQuery plugin.

It's my first attempt at a jQuery plugin so I would be very happy to receive any constructive feedback.

 

Why is yassSlidedifferent to other Slideshow Plugins

I wanted a slideshow that would be responsive but the client did not want the images cropped when in Landscape mode and thus I couldn't use BackStretch.

The slideshow reacts to size changes in real-time and you can re-initialize the slideshow on orientation change, so that it is possible to use different images for Landscape and Portrait.

It uses CSS3 transitions for smooth fades

It's really simple to install and use;

  • No dependancies on othe plugins
  • Simple configuration

 

Really really Simple Install

Download the install files and copy into your project.

You will then need to reference jQuery and the yasslide plugin from your code using the <SCRIPT> tag

        
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.yasslide.js"></script>

having done that you will need to define the list of images that you want to display. The easiest way to do this is by using a javascript array


		files=[
               'http://myserver.com/images/slide01.jpg', 
               'http://myserver.com/images/slide02.jpg',
               'http://myserver.com/images/slide03.jpg'
               ];

and then call yasslide

        
  		$('#content').yasslide({
		   files: files, // an array of image files
		  });
        

For working examples see the Simple and Complex example pages and view the page source through your browser.

More Options

        
  		$('#content').yasslide({
			delay: 3000,  			// optional - delay in milli-seconds
		    debug: true, 				//optional - output messages to console.log
			top: '0px' 				// optional - depending on your container div, where to create 
            						// the floating div.  try without first.
			bgmode: 'contain', 		// optional: corresponds to background-size: defaults to 'cover'  
            						// alternatives:  'contain', 'auto'
			bgposition: 'top center', 	// optional: corresponds to background-position.  
            							// Defaults to 'center center'
			files: files 				// an array of image files
		  });