Hi folks,

Novice js user here. I'm building a site using a Drupal theme ("Business") and it comes with an image slider which currently swaps images by rotating them. I'd like to have the images fade in/out and while usually I can google/mash my way though the code and figure out the changes I'd like to make, things I have tried so far have not worked in this instance.

There is a file called sliding_effect.js and within this file is the code I suspect I have to change but not sure a) what to change/delete/comment out and b) if there are any other files I need to modify. I am unable to post a link to the site as it's not publicly available yet but will post the suspect code below. Any help is greatly appreciated, the original code author will not respond to requests for support from anyone it seems. If I have not provided you with enough information, please let me know. I don't know what I don't know!

//Paging + Slider Function
	rotate = function(){	
	    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
	    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
	    $(".paging a").removeClass('active'); //Remove all active class
	    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
	    //Slider Animation
	        left: -image_reelPosition
	    }, 500 ); 

	//Rotation + Timing Event
	rotateSwitch = function(){	
	$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");	
	    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
	        $active = $('.paging a.active').next();
	        if ( $active.length === 0) { //If paging reaches the end...
	            $active = $('.paging a:first'); //go back to first
	        rotate(); //Trigger the paging and slider function
	    }, 5000); //Timer speed in milliseconds (3 seconds)	
	rotateSwitch(); //Run function on launch