Welcome to my first post! Please excuse any formatting issues.
I am currently working on a project where I am trying to create a slideshow using Javascript. I have successfully added images into an array and have the slideshow up and running.
However, I am facing an issue where the images are larger than the viewport. I have read through various posts like this one and this, but they do not address resizing images in arrays or require adding images to HTML, which is not what I want to do. I have tried using CSS, but it did not work as expected, and the lines of code I added in Javascript only adjusted the visible portion of the image, not the image itself. Is there a solution for what I am trying to achieve, and if so, where should I implement it to get the desired results?
Thank you for your assistance!
HTML
<div id="libImage"></div>
Javascript
var images = ["../images/lib-orange.jpg", "../images/lib-main.jpg", "../images/lib-powel.jpg", "../images/lib-ostrander.jpg"];
$(function () {
var i = 0;
$("#libImage").css("background", "url(images/" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#libImage").fadeOut("slow", function () {
$(this).css("background", "url(images/" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 3000);
});
Thank you for the reply, apologies for the delay. Although the effect was different from what I intended, the problem remains the same. The images are not scaling to fit the size of the viewport.