fadeSlides

Adding Slide Function

View Project

From there, I wanted to show multiple posts within the same space. To address this issue, I looked to another CSS solution, but did not find any that suited my needs. I needed to add jQuery, and I utilized the Slides.js method of having multiple DIVs “slide” on top of each other, while the previous slide fades out.

Sample Code:

$(function(){
	// Set starting slide to 1
	var startSlide = 1;
	// Get slide number if it exists
	if (window.location.hash) {
		startSlide = window.location.hash.replace('#','');
	}
	// Initialize Slides
	$('#slides').slides({
		preload: true,
		//preloadImage: 'img/loading.gif',
		generatePagination: true,
		hoverPause: true,
		effect: 'slide, fade',
		crossfade: true,
		slideSpeed: 500,
		fadeSpeed: 500
		// Get the starting slide
		//start: startSlide,
		//animationComplete: function(current){
		// Set the slide number as a hash
		//window.location.hash = '#' + current;

	});
});