Swap image div-by-div

September 7, 2023

Need to swap image and title div-by-div like below website example e-Zest Insights
.

Here image and title changing div-by-div –
1st image replacing second div image and 2nd div image replacing third div image and vice versa with each div image.

var image1 = document.getElementById("image1");
var images1 = [
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg"
];
var index = 0;

function updateImage1() {
  image1.src = images1[index];
  index = (index + 1) % images1.length;
}
setInterval(updateImage1, 1500);

body {
  padding: 20px;
}

img {
  max-height: 100px;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <img id="image1" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg" alt="">
    </div>
    <div class="col">
      <img id="image2" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg" alt="">
    </div>
    <div class="col">
      <img src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg" alt="">
    </div>
  </div>
</div>

>Solution :

You only update 1 image, you will need to update all. See example below where I give all images the class image-slideshow and iterate over them. The url is determined based on the image index and the index of the forEach() iteration over the images.

I started with index 1 to avoid a delay on the first iteration. In the first iteration with index 0 the urls end up the same as in the html.

var imageIndex = 1;
var imageUrls = [
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg"
];


function updateImages() {
  document.querySelectorAll(".image-slideshow").forEach((img, i) => {
    img.src = imageUrls[(imageIndex + i) % imageUrls.length];
  });
  imageIndex--;
}
setInterval(updateImages, 1500);

body {
  padding: 20px;
}

img {
  max-height: 100px;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <img class="image-slideshow" id="image1" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg" alt="">
    </div>
    <div class="col">
      <img class="image-slideshow" id="image2" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg" alt="">
    </div>
    <div class="col">
      <img class="image-slideshow" id="image3" src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg" alt="">
    </div>
  </div>
</div>