Can I create an auto slideshow for images?

[pswpswpsw]

I know how to add images in my markdown pages, and add them statically. However, how to create an autoslide show for the image gallery?

[Gothicania]

#374 (comment)

[Gothicania]

#374 (comment)

[skytheacademic]

okay so after way too much time spent on this, I came up with a weird, but usable, solution. it's not pretty, but it does the job...

First, go into maindirectory/assets/js and create a js file titled slideshow with the following code
`// slideshow.js

// Function to start the slideshow
function startSlideshow() {
let currentIndex = 0;
const images = [
'./images/img_mountains_wide.jpg',
'./images/img_nature_wide.jpg',
'./images/img_snow_wide.jpg',
// Add more image URLs here
];

const imageElement = document.getElementById('slideshow-image');

function showNextImage() {
imageElement.src = images[currentIndex];
currentIndex = (currentIndex + 1) % images.length;
}

// Start the slideshow
setInterval(showNextImage, 3000); // Change images every 3 seconds
}
`

Now, what's annoying is that you'll have to come back to this file to adjust the slideshow images and timing, but it works; make sure to add in your own image URLs. for the page you're trying to embed the slideshow in, add the following script:

`

<script src="../assets/js/slideshow.js"></script> <script> startSlideshow(); // Start the slideshow </script>`

From there, push the changes and load the webpage in, and you should get a slideshow that changes slides every 3 seconds.

[rjzupkoii]

There are some design reasons to avoid doing this automatically, but a responsible slide show seems like a reasonable compromise in that it allows images to be stepped through and it would be a good time to with PhotoSwipe since magnific-popup was removed in #2428.