I am facing a challenge with developing an image grid that transitions some images at random intervals using either jQuery or another method in JavaScript. It's important to note that I don't want all the images to change simultaneously; each group of images should have its own time interval for changing.
The images are absolutely positioned within the parent div, allowing for a smooth transition where one fades in as the other fades out, creating a seamless effect.
I'm currently stuck and have no idea how to achieve this. Can someone provide assistance? Below is the code snippet:
(function(){
let first = $('.column1 img:gt(0)');
first.hide();
let images = $('.column1').find('img');
setInterval(function(){
let current = $('.column1 img:visible');
let next = current.next().length ? current.next():$('.column1 img:eq(0)');
current.fadeOut(300);
next.fadeIn(300);
}, 3000);
});#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
... (Image HTML Code Here) ...
</div>