Video Player Like Slider Plugin With jQuery - Image Player
File Size: | 196 KB |
---|---|
Views Total: | 777 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Image Player is a jQuery/jQuery UI powered slider plugin that transition between slide items (e.g. images and text) just like in a video player.
How to use it:
1. Load the necessary jQuery and jQuery UI libraries.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/jquery-ui.min.js"></script>
2. Load the Image Player plugin's files.
<link rel="stylesheet" href="css/jquery-image-player-min.css" /> <script src="js/jquery-image-player-min.js"></script>
3. Add a list of slide items to the slider and specify the duration in the data-duration
attribute:
<div id="example"> <ul> <li data-duration="0">Slide 1</li> <li data-duration="1000">Slide 2</li> <li data-duration="1000">Slide 3</li> <li data-duration="1000">Slide 4</li> <li data-duration="1000">Slide 5</li> ... </ul> </div>
4. Call the function on the top container to generate a basic slider.
$('#example').jsVideoPlayer({ // options here });
5. Customize the transition effects using the data-effect-*
attributes.
<div id="example"> <ul> <li data-duration="0" data-effect="animate" data-effect-steps="20" data-effect-animate="margin-left:0; opacity:1">Slide 1</li> <li data-duration="1000" data-effect="fadeIn">Slide 2</li> <li data-duration="1000" data-effect="fadeOut">Slide 3</li> <li data-duration="1000">Slide 4</li> <li data-duration="1000">Slide 5</li> ... </ul> </div>
6. Available plugin options.
$('#example').jsVideoPlayer({ showTitle: true, showCurrentTime: true, showTotalTime: true, showSliderTime: true, onFinishGotoStart: false, playerWidth: 900, playerHeight: 385, });
This awesome jQuery plugin is developed by uiplayground. For more Advanced Usages, please check the demo page or visit the official website.