Lightweight Fullscreen Slideshow Plugin with jQuery - poposlides

poposlides is a lightweight jQuery plugin that converts a list of images into a responsive, fullscreen, automatic, cross-fading carousel slider with arrows navigation and numeric pagination.

How to use it:

1. Load the poposlides.css in the header and the poposlides.js at the bottom of the webpage. Make sure you webpage has jQuery library loaded.

<link href="css/poposlides.css" rel="stylesheet" >
...
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> 
<script src="js/poposlides.js"></script> 

2. Add your images into the slideshow as background.

<div class="slides-box">
  <ul class="slides">
    <li style="background: url('1.jpg') center"></li>
    <li style="background: url('2.jpg') center"></li>
    <li style="background: url('3.jpg') center"></li>
    <li style="background: url('4.jpg') center"></li>
    <li style="background: url('5.jpg') center"></li>
  </ul>
</div>

3. Initialize the slideshow by calling the function on the list element.

$(".slides").poposlides();

4. Config options available.

$(".slides").poposlides({

  // autoplay
  auto:true, 

  // display navigation
  nav:true,

  // autoplay interval
  playspeed:3500, 

  // animation speed
  fadespeed:500, 

  // endless looping
  loop:true,

  // enable pagination
  pagination:true, 

  // center the pagination
  pagecenter:true, 

  // CSS selector for prev button
  prev:".prev", 

  // CSS selector for next button
  next:".next" 

});

Change logs:

2015-07-29

• JS & CSS update.

---

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