Switch images in the slides

With this code, you can have for example an Accordion Type slider, and the main image in each slide would be switched. In this example there will be 2 slides, and 4-4 images in them, which will be switched in every 4 seconds.

What you need to do is to go to your slide, put down a layer with an image item in it. Give the image item a CSS Class for example image_change_1. Duplicate the Layer 3 times, it will be in the same position, as the previous one, go to the newly created Image items, and give them unique classes too, like image_change_2,image_change_3 and image_change_4. Do the same on your other slide too, the classes has to be unique there too, so continue with image_change_5, or something else.

Go to the HTML widget, turn it on, and write in there your code:

<script>
njQuery(document).ready(function(){
//first slide
//hiding the first 3 images, and showing the 4th
		njQuery(".image_change_1").css("opacity","0");
		njQuery(".image_change_2").css("opacity","0");
		njQuery(".image_change_3").css("opacity","0");
		njQuery(".image_change_4").css("opacity","1");
//wait 4 sec, hide the 4th image, show the 1st
	setTimeout(function(){
		njQuery(".image_change_1").animate({"opacity":"1"},500);
		njQuery(".image_change_4").animate({"opacity":"0"},500);
	},4000);
//wait 8 sec, so +4 sec, hide the 1st image, show the 2nd
	setTimeout(function(){
		njQuery(".image_change_2").animate({"opacity":"1"},500);
		njQuery(".image_change_1").animate({"opacity":"0"},500);
	},8000);
//wait 12 sec = 8 + 4 sec, hide the 2nd image, show the 3rd
	setTimeout(function(){
		njQuery(".image_change_3").animate({"opacity":"1"},500);
		njQuery(".image_change_2").animate({"opacity":"0"},500);
	},12000);
//wait 16 sec = 12 + 4 sec, hide the 3rd image, show the 4th
	setTimeout(function(){
		njQuery(".image_change_4").animate({"opacity":"1"},500);
		njQuery(".image_change_3").animate({"opacity":"0"},500);
	},16000);
//same as before, just do the same in every 16 seconds (first time loading waits 16 seconds too, that is why it has to be written before once without it)
setInterval(function(){
	setTimeout(function(){
		njQuery(".image_change_1").animate({"opacity":"1"},500);
		njQuery(".image_change_4").animate({"opacity":"0"},500);
	},4000);
	setTimeout(function(){
		njQuery(".image_change_2").animate({"opacity":"1"},500);
		njQuery(".image_change_1").animate({"opacity":"0"},500);
	},8000);
	setTimeout(function(){
		njQuery(".image_change_3").animate({"opacity":"1"},500);
		njQuery(".image_change_2").animate({"opacity":"0"},500);
	},12000);
	setTimeout(function(){
		njQuery(".image_change_4").animate({"opacity":"1"},500);
		njQuery(".image_change_3").animate({"opacity":"0"},500);
	},16000);
},16000);
//second slide with same javascript, just different image classes
		njQuery(".image_change_5").css("opacity","0");
		njQuery(".image_change_6").css("opacity","0");
		njQuery(".image_change_7").css("opacity","0");
		njQuery(".image_change_8").css("opacity","1");
	setTimeout(function(){
		njQuery(".image_change_5").animate({"opacity":"1"},500);
		njQuery(".image_change_8").animate({"opacity":"0"},500);
	},4000);
	setTimeout(function(){
		njQuery(".image_change_6").animate({"opacity":"1"},500);
		njQuery(".image_change_5").animate({"opacity":"0"},500);
	},8000);
	setTimeout(function(){
		njQuery(".image_change_7").animate({"opacity":"1"},500);
		njQuery(".image_change_6").animate({"opacity":"0"},500);
	},12000);
	setTimeout(function(){
		njQuery(".image_change_8").animate({"opacity":"1"},500);
		njQuery(".image_change_7").animate({"opacity":"0"},500);
	},16000);
setInterval(function(){
	setTimeout(function(){
		njQuery(".image_change_5").animate({"opacity":"1"},500);
		njQuery(".image_change_8").animate({"opacity":"0"},500);
	},4000);
	setTimeout(function(){
		njQuery(".image_change_6").animate({"opacity":"1"},500);
		njQuery(".image_change_5").animate({"opacity":"0"},500);
	},8000);
	setTimeout(function(){
		njQuery(".image_change_7").animate({"opacity":"1"},500);
		njQuery(".image_change_6").animate({"opacity":"0"},500);
	},12000);
	setTimeout(function(){
		njQuery(".image_change_8").animate({"opacity":"1"},500);
		njQuery(".image_change_7").animate({"opacity":"0"},500);
	},16000);
},16000);
});
</script>

You can see in the comments, which part means what. The setInterval function is the one, that repeats, but it starts after the given time (16000ms), so that is why the same code had to be given before it too without this setInterval.