Video Player Like Slider Plugin With jQuery - Image Player

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.