Minimalist Cross-fading Slideshow Plugin - jQuery hype.js
File Size: | 6.38 KB |
---|---|
Views Total: | 1574 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.