Tiny Cross-platform Image Slider Plugin - jQuery partialViewSlider

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,
  // 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() {}
});

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

  • Publication date: 10.10.2018
  • Source