Full width header image cycle on refresh

[edmiston99]

Here is a simple approach.

I have added a random element to my Simple Carousel Widget.

1. You you need to do is place the Widget on the page.
2. Place a number of images, shapes or text on the page and add a special Name of htmlclass="illy" to them.
3. If you are after a full width carousel, then add stretch to the images. Shapes work too, as in my demo, you could stretch the characters, noting them are Shapes not Text as text will not stretch.

Each visit to the holding page returns a random image. If you are "unlucky", it could be the same image several times but for 3 to 4 images this is quite likely.

After the image is shown for 8 seconds, another is picked and so you get a random carousel.
If you only every want one image, increase the 8 seconds to a stupidly large number: 300000 milliseconds (five minutes).

JS - Random Carousel.xar.

---

Placeholder HTML Body (code):

<script>
$(document).ready(function(){


(function fade(idx) {
  var $illy = $('.illy');
  $illy.hide();
  idx = Math.floor(Math.random() * $illy.length);
  $illy.eq(idx).fadeIn(1000).delay(8000).fadeOut(1000, function () {
    fade(idx + 1 < $illy.length ? idx + 1 : 0);
  });
}(0));


});


</script>

I think this on just might do it. I assume you just stack the images on top of each other?

[Acorn]

I think this on just might do it. I assume you just stack the images on top of each other?

As you are stretching them, ideally all that is needed is they are the same height and aligned vertically.
If you apply Full Width & Scaled to my example file, you will get giant letter fragments but each is now fully stretched the width of the browser. It is clearer with images but I considered the file size of the example should be kept small.

Acorn

[behzad]

I used them for a client but now I wonder if websites created in 2020 will need header sliders. They just slow down the site to me. A nice picture will do the job.