How to make an infinite slideshow in HTML?

**Colmike9** · 04-22-2024, 05:17 AM

Dynamically populating a JavaScript image slideshow

**INever** · 04-22-2024, 06:21 AM

Ok will read this. If there's non java methods that's good too.

And to all, belated happy 419 or 420 as per your interests.

**fris** · 04-22-2024, 07:06 AM

Originally posted by INever

Ok will read this. If there's non java methods that's good too.

And to all, belated happy 419 or 420 as per your interests.

could use php to grab the file list of the directory and have that spit out the markup needed for the slideshow.

**INever** · 04-22-2024, 07:17 AM

Originally posted by fris

could use php to grab the file list of the directory and have that spit out the markup needed for the slideshow.

Thnx. Will print and save this page.

I admit I'm at the Paul Markam level of coding ability but isn't there something simple like:

<script> xyxabnd rotate images from <a href="https://image-files.domain.com" #images interval in seconds# </script></a>

**Colmike9** · 04-22-2024, 08:22 AM

Originally posted by INever

And to all, belated happy 419 or 420 as per your interests.

Happy late 420!
This year was the first year I bought it legally, and it was high quality indoor and I got 20% off an ounce with a coupon. Fun times

**blackmonsters** · 04-22-2024, 09:35 AM

Originally posted by INever

Searching google is nearly useless these days.

What is the easiest one or two line script/html that will serve an infinite slide show out of a folder of images?

I did something like this a million years ago...

What happened to chatgtp giving us the code with AI?

**zerovic** · 04-22-2024, 09:19 PM

i would use php glob to get all images from the folder and jquery setinterval to rotate them.

**fris** · 04-23-2024, 09:50 AM

Originally posted by INever

Thnx. Will print and save this page.

I admit I'm at the Paul Markam level of coding ability but isn't there something simple like:

<script> xyxabnd rotate images from <a href="https://image-files.domain.com" #images interval in seconds# </script></a>

this will use glob to get a list of images and output the html markup (of course you will need to use the proper markup for the js slideshow)

Code:

<?php

$path = 'images/';
$file_types = ['*.jpg', '*.png', '*.gif'];

$images = [];
foreach ($file_types as $file_type) {
    foreach (glob($path . $file_type) as $file) {
        $images[$file] = $path . basename($file);
    };
}

foreach ($images as $i) {
    echo sprintf('<a href="%s"><img src="%s" alt="%s" /></a>', $i, $i, basename($i));
}

**just a punk** · 04-23-2024, 11:20 AM

ChatGPT will write this code for you in seconds...

**blackmonsters** · 04-23-2024, 11:46 AM

Originally posted by just a punk

ChatGPT will write this code for you in seconds...

Show us.

**blackmonsters** · 04-23-2024, 12:00 PM

User
What is the easiest one or two line script/html that will serve an infinite slide show out of a folder of images?

ChatGPT
You can achieve an infinite slideshow with a simple HTML script using JavaScript. Here's a basic example:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<base href="https://gfy.com/" />
<base href="https://gfy.com/" />
Ignore this line; was inserted by gfy because I didn't use the code tags
<title>Infinite Slideshow</title>
<style>
#slideshow {
position: relative;
max-width: 100%;
max-height: 100%;
margin: auto;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<div id="slideshow"></div>

<script>
var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // List your image filenames here
var index = 0;

function nextImage() {
index = (index + 1) % images.length;
document.getElementById('slideshow').innerHTML = '<img src="' + images[index] + '">';
setTimeout(nextImage, 3000); // Change slide every 3 seconds (adjust as needed)
}

nextImage(); // Start the slideshow
</script>

</body>
</html>

Followed up with :

How can I do this from a folder of images though?

ChatGPT
To create a slideshow from a folder of images dynamically, you'll need to use server-side scripting languages like PHP to fetch the images from the folder and then serve them to the client-side script. Here's how you can modify the previous example to achieve this using PHP:

Create an HTML file (e.g., slideshow.html) with the following content:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Infinite Slideshow</title>
<style>
#slideshow {
position: relative;
max-width: 100%;
max-height: 100%;
margin: auto;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<div id="slideshow"></div>

<script>
var images = <?php echo json_encode(glob('images/*.jpg')); ?>;
var index = 0;

function nextImage() {
index = (index + 1) % images.length;
document.getElementById('slideshow').innerHTML = '<img src="' + images[index] + '">';
setTimeout(nextImage, 3000); // Change slide every 3 seconds (adjust as needed)
}

nextImage(); // Start the slideshow
</script>

</body>
</html>

That worked; but the file has to have PHP extension

**INever** · 04-23-2024, 11:15 PM

Page Pdf'd/saved.

**adultinnovation** · 04-24-2024, 04:47 AM

out of business

**blackmonsters** · 04-26-2024, 08:25 AM

Originally posted by adultinnovation

out of business

How is this different than looking it up on stackoverflow, or github?
Who went out of business because of those sites?

**NatalieK** · 04-29-2024, 11:18 AM

would you use html now for a slideshow now?

and for an infinitive slide show, you need either to loop or have infinitive pics or clips...

so are you looking for a loop, or zillions of images?

How to make an infinite slideshow in HTML?

Tech How to make an infinite slideshow in HTML?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment