Tiny Cross-platform Image Slider Plugin - jQuery partialViewSlider

partialViewSlider is a lightweight, responsive, touch-enabled image slider that displays part of the previous and next pictures on the left and right.

More features:

• Navigation arrows and pagination bullets.
• Custom slider controls.
• Autoplay and pause on hover.
• Keyboard interactions.
• Smooth transitions.
• Perspective mode.
• Auto adjusts the slider on window resize

How to use it:

1. Load the Material Icons for the slider controls (OPTIONAL).

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Load the jQuery partialViewSlider plugin's files in the html page.

<link rel="stylesheet" href="dist/partialviewslider.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="dist/partialviewslider.js"></script>

3. Create a list of images to be displayed in the partical view slider.

<ul id="partial-view">
  <li>
    <img src="1.jpg">
  </li>
  <li>
    <img src="2.jpg">
  </li>
  <li>
    <img src="3.jpg">
  </li>
  <li>
    <img src="4.jpg">
  </li>
  <li>
    <img src="5.jpg">
  </li>
  ...
</ul>

4. Call the function on the image list to initialize the plugin.

var mySlider = $('#partial-view').partialViewSlider();

5. Create custom controls using the following API methods.

// back to previous image
mySlider.prev();

// go to next image
mySlider.next();

// pause the slider
mySlider.pause();

// resume the slider
mySlider.play();

5. Set your prefered options to customize the slider.

$('#partial-view').partialViewSlider({

  // 70%
  width: 70,

  // shows controls
  controls: true,

  // inside, outside, neighbors
  controlsPosition: 'inside', 

  // shows background
  backdrop: true,

  // shows pagination dots
  dots: true,

  // enable autoplay
  auto: true,

  // transition speed in ms
  transitionSpeed: 400,

  // autoplay delay in ms
  delay: 4000,

  // enable pause on hover
  pauseOnHover: true,

  // enable keyboard interactions
  keyboard: true,

  // enable perspective mode
  perspective: false,

  // show multiple items at once. 
  // this is an object of resolutions and number of items above that resolution. 
  items: {"0": 1},

  // custom next/prev arrows
  prevHtml: '<i class="material-icons">chevron_left</i>',
  nextHtml: '<i class="material-icons">chevron_right</i>'
  
});

6. Callback functions available.

$('#partial-view').partialViewSlider({

  onLoad: function() {},
  onSlideEnd : function() {}

});

Changelog:

2019-04-25

• Added multiple items option in the slider

---

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