Dynamic Background Slideshow With Vanilla JavaScript

Preview:

Description:

A vanilla JavaScript background image switcher that switches between background images with custom transitions by clicking given trigger elements.

Suitable for product viewer where your customer can switch between product images by clicking thumbnails.

How to use it:

Insert the main JavaScript file into the HTML file.

<script src="/dist/bundle.js"></script>

Create trigger elements and define the path to the background images as follows:

<a class="link" href="#" data-pu-link='{"name":"myImage1", "image":"1.jpg"}'}">Link 1</a></br>
<a class="link" href="#" data-pu-link='{"name":"myImage2", "image":"2.jpg"}'}">Link 2</a></br>
<a class="link" href="#" data-pu-link='{"name":"myImage3", "image":"3.jpg"}'}">Link 3</a></br>
<a class="link" href="#" data-pu-link='{"name":"myImage4", "image":"4.jpg"}'}">Link 4</a>

Wrap the trigger elements into a container and customize the background image switcher in the data-pu-background-image-switch attribute. Done.

<div data-pu-background-image-switch='{
  "name":"myImageSwitch",
  "image":"assets/default.jpg",
  "target":{
    "querySelector":"body",
    "sticky":false
  },
  "animate":{
    "opacity":{"from":0, "to":1},
    "props":{
      "duration":"1s",
      "timing":"ease",
      "delay":".25s"
    }
  },
  "css":[
    ".pu-background-image-switch-comp {height:100%;color:white;font-size:4vmin;text-shadow:-1px -1px 10px #111,1px -1px 10px #111,-1px 1px 10px #111,1px 1px 10px #111;}",
    ".pu-background-image-switch-comp .link {display:inline-block;color:white;text-decoration:none;padding:10px 30px 10px 30px;cursor:pointer;border:solid 2px #666;background-color:#333;margin:20px;border-radius:5px;}",
    ".pu-background-image-switch-comp .link:hover {background-color:#999;}",
    ".pu-background-image-switch-image {background:no-repeat center/contain;pointer-events:none;z-index:-1;}",
    ".pu-background-image-switch-image-myImageSwitch {}",
    ".pu-background-image-switch-image-myImage1 {}"
  ]
}'>
  <a class="link" href="#" data-pu-link='{"name":"myImage1", "image":"1.jpg"}'}">Link 1</a>
  <a class="link" href="#" data-pu-link='{"name":"myImage2", "image":"2.jpg"}'}">Link 2</a>
  <a class="link" href="#" data-pu-link='{"name":"myImage3", "image":"3.jpg"}'}">Link 3</a>
  <a class="link" href="#" data-pu-link='{"name":"myImage4", "image":"4.jpg"}'}">Link 4</a>
</div>