Easy Responsive Slider Plugin With jQuery And CSS3 - photoSlider

photoSlider is a jQuery slider plugin designed for showcasing your photos with different sizes in a responsive, auto-rotating, infinite-looping carousel interface.

How to use it:

1. Link to jQuery library together with the jQuery photoSlider plugin's stylesheet photoslider.css and JavaScript photoslider.js.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<!-- jQuery photoslider -->
<link rel="stylesheet" href="photoslider.css">
<script src="photoslider.js"></script>

2. Insert your favorite photos into the slider and then specify the width & height for each slide using HTML5 data attributes as this:

<div class="photoslider">

  <div class="photoslider__item" data-width="500" data-height="500">
    <img src="1.png">
    <div class="photoslider__item__description">Caption 1</div>
  </div>

  <div class="photoslider__item" data-width="300" data-height="500">
    <img src="2.png">
    <div class="photoslider__item__description">Caption 2</div>
  </div>

  <div class="photoslider__item" data-width="750" data-height="500">
    <img src="3.png">
    <div class="photoslider__item__description">Caption 3</div>
  </div>

</div>

3. The JavaScript to active the slider with default options.

$('.photoslider').photoslider();

4. Config the plugin by passing the following options as an object to the photoslider() method:

$('.photoslider').photoslider({

  // enable/disable autoplay
  'autoplay': true,

  // animation duration
  'duration': 3000,

  // animation speed
  'speed': 400,

  // resize slider on window resize
  'resize': true,

  // prefix
  'prefix': 'photoslider',

  // enable / disable navigation controls
  'navigation': true,
  'navigationPrev': true,
  'navigationNext': true,

  // prev / next text
  'prevText': 'PREV',
  'nextText': 'NEXT'
  
});

---

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