Dynamic Background Slideshow With Vanilla JavaScript

Category: Javascript , Slideshow | September 28, 2019
Author:plutonium-js
Views Total:352 views
Official Page:Go to website
Last Update:September 28, 2019
License:MIT

Preview:

Dynamic Background Slideshow With Vanilla JavaScript

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>

You Might Be Interested In:


Leave a Reply