How to turn a static image background in blogger in an image slideshow?

Question

My husband has a blogger powered, responsive photography site with a static image background with the site's title and a more button on it. He would like to replace the image with a simple auto-playing slideshow of max. 10 images. No need for crossfade, control buttons or anything, just 10 images changing automatically. The code looks like this now:

<div class='pointnbt-1'/>

<div class='home-intronbt' style='background-image: url( )'>

<div class='home-intro-insidenbt'>
  <h1 class='light-textnbt'>SITE TITLE</h1>
  <a class='scroll-downnbt dark-textnbt' style='background-color: #ffffff'>MORE</a>
</div>

</div>

<div class='spacenbt'/>

Could somebody give me suggestions about turning the image to a slideshow?

score 0 · Answer 1 · edited May 23 '17 at 12:29

This question has already been answered here. Here is how to do it in blogger.

Paste the below code above </body> in your blogger template. Replace the IMAGE URL in the code with your Image URLs

<script type="text/javascript">
  var images = new Array('IMAGE 1 URL', 'IMAGE 2 URL', 'IMAGE 3 URL');
  var nextimage = 0;
  doSlideshow();

  function doSlideshow() {
    if (nextimage >= images.length) {
      nextimage = 0;
    }
    $('.home-intronbt')
      .css('background-image', 'url("' + images[nextimage++] + '")')
      .fadeIn(500, function() {
        setTimeout(doSlideshow, 1000);
      });
  } < script >

How to turn a static image background in blogger in an image slideshow?

1 Answers1