Tiny Cross-platform Image Slider Plugin - jQuery partialViewSlider

File Size: 1.91 MB
Views Total: 6454
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<script src="dist/partialviewslider.js"></script>

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

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

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

// go to next image

// pause the slider

// resume the slider

5. Set your prefered options to customize the slider.


  // 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.


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




  • 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.