Minimalist Cross-fading Slideshow Plugin - jQuery hype.js

hype.js is a small and easy-to-use jQuery plugin used for generating a dynamic, cross-fading slideshow from a sequence of images you specify in the JavaScript.

How to use it:

1. To get stared, you need to have a container element to place the slideshow.

<div id="example"></div>

2. Import jQuery library and the hype.js script into the web page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="jquery.hype.js"></script>

3. Call the function on the slideshow container and specify an array of images to showcase in the slideshow.

$("#example").hype({
  images: [
    "https://picsum.photos/600/450?image=778",
    "https://picsum.photos/600/450?image=777",
    "https://picsum.photos/600/450?image=786"
    "https://picsum.photos/600/450?image=785"
    ...
  ],
  height: 450,
  width: 600,
});

4. Set the animation speed and transition delay.

$("#example").hype({
  images: [
    "https://picsum.photos/600/450?image=778",
    "https://picsum.photos/600/450?image=777",
    "https://picsum.photos/600/450?image=786"
    "https://picsum.photos/600/450?image=785"
    ...
  ],
  height: 450,
  width: 600,
  fadeDuration: 1500,
  imageDuration: 3000,
});

5. Set the alignment of the slideshow.

$("#example").hype({
  images: [
    "https://picsum.photos/600/450?image=778",
    "https://picsum.photos/600/450?image=777",
    "https://picsum.photos/600/450?image=786"
    "https://picsum.photos/600/450?image=785"
    ...
  ],
  height: 450,
  width: 600,
  align: "none"
});

---

This awesome jQuery plugin is developed by jamjar919. For more Advanced Usages, please check the demo page or visit the official website.