Resolved Slide Show, Part Two [Archive]

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:

"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

Is there a simple fix?
Well, it looks as though the script that you have chosen for your project is faulty. :confused:
So you could go back to the authors with your complaint.

Alternatively, you could use a CSS method instead. :cool:

Here is an example for your consideration...

<!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