Slide Show, Part Two

**marain** · 09-22-2020, 10:09 PM

Folks,

Same page, https://www.njgunlawyers.com/page.php?here=FID , but with a different perplexing problem: The sizing issue appears to be completely solved (thanks to Coothead). The perplexing problem is that the slides present randomly, rather than sequentially. JS code:

Code:

"use strict";
$(document).ready(function() {
	var nextSlide = $("#slides img:first-child");
	var nextCaption;
	var nextSlideSource;
	
	// the function for running the slide show	
	var runSlideShow = function() {   
        $("#caption").fadeOut(2000);
        $("#slide").fadeOut(2000,
        	function () {
       	     	if (nextSlide.next().length == 0) {
					nextSlide = $("#slides img:first-child");
}
				else {
					nextSlide = nextSlide.next();
}
				nextSlideSource = nextSlide.attr("src");
				nextCaption = nextSlide.attr("alt"); 
				$("#slide").attr("src", nextSlideSource).fadeIn(4500);					
				$("#caption").text(nextCaption).fadeIn(4500);
}
)
}
	
	// start slide show
    var timer1 = setInterval(runSlideShow, 4000);
    
    // start and stop the slide show
	
	$("#slide").click(function() {
		if (timer1 != null) {
	    	clearInterval(timer1);
	    	timer1 = null;
		}
		else {
			timer1 = setInterval(runSlideShow, 2000);
		}
	});
	
})

Is there a simple fix?

A.

**coothead** · 09-23-2020, 02:59 PM

Originally Posted by marain

Is there a simple fix?

Well, it looks as though the script that you have chosen for your project is faulty.

So you could go back to the authors with your complaint.

Alternatively, you could use a CSS method instead.

Here is an example for your consideration...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>
<base href="https://www.njgunlawyers.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
 }
#slides {
    position:relative;
    height: 16em;
 }
#slides  img {
    position: absolute;
    height: 100%; 
    width: auto;
    left: 50%;   
    transform:translate(-50%, 0);
    opacity: 0;
    box-shadow:0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
    animation: fadeinout 24s ease-in-out infinite;
}
#slides img:nth-child(1) {
    animation-delay: 20s;
 }
#slides img:nth-child(2) {
    animation-delay: 16s;
 }
#slides img:nth-child(3) {
    animation-delay: 12s;
 }
#slides img:nth-child(4) {
    animation-delay: 8s;
 }
#slides img:nth-child(5) {
    animation-delay: 4s;
 }
#slides img:nth-child(6) {
    animation-delay: 0s;
}
@keyframes fadeinout{
8.333% {
    opacity: 1; 
  }
16.666% {
    opacity: 0; 
  }
 }
</style>

</head>
<body>

<div id="slides">
 <img src="images/fid236x191.jpg" alt="">
 <img src="images/fid341x191.jpg" alt="">
 <img src="images/fid178x191.jpg" alt="">
 <img src="images/fid156x191.jpg" alt="">
 <img src="images/fid287x191.jpg" alt="">
 <img src="images/fid310x191.jpg" alt="">
</div>

</body>
</html>

coothead