Touch-friendly Carousel & Gallery - jQuery isystkSlider

isystkSlider is a feature-rich jQuery slider plugin to create mobile-friendly and fully customizable carousels & galleries for showcasing featured images, product photos, client logos and much more. 

Key Features:

• Allows to specify the number of images to show per page.
• Allows to specify the number of images to slide at a time.
• Slide & fade animations.
• Custom navigation and pagination controls.
• Momentum scrolling on touch screens.
• Autoplay and pause on hover.
• Allows you to display images in fullscreen mode.

How to use it:

1. The required HTML structure for the carousel slider.

<div class="js-slider isystkSlider">
  <div class="view-layer">
    <ul class="parent">
      <li class="child">
        <p>
          <img src="1.jpg" />
        </p>
      </li>
      <li class="child">
        <p>
          <img src="2.jpg" />
        </p>
      </li>
      <li class="child">
        <p>
          <img src="3.jpg" />
        </p>
      </li>
    </ul>
  </div>
</div>

2. Add pagination & navigation controls to the carousel slider if needed.

<div>
  <p class="next-btn"><a href="#"><img src="./images/btn-next.png" alt="Next" ></a></p>
  <p class="prev-btn"><a href="#"><img src="./images/btn-prev.png" alt="Prev" ></a></p>
  <ul class="paging dot">
    <li class="active" data-pageno="1"></li>
    <li data-pageno="2"></li>
    <li data-pageno="3"></li>
  </ul>
</div>

3. Load jQuery library and the jQuery isystkSlider plugin at the end of the document.

<script src="/path/to/cdn/jquery.js"></script>
<script src="/path/to/js/jquery-isystkSlider.js"></script>

4. The necessary CSS styles. Copy and paste the following CSS snippets in your document.

/* core styles */
.isystkSlider {
  position: relative;
  width: 650px;
  max-width: 100%;
  overflow: hidden;
}

.isystkSlider .view-layer {
  width: 578px;
  max-width: 100%;
  overflow: hidden;
}

.isystkSlider ul.parent{
  margin-bottom:10px;
}

.isystkSlider li.child{
  float:left;
}

.isystkSlider li.child p{
  margin:0 5px 0 0;
  border:solid 1px #dedede;
  background:#fff;
  padding:3px;
}

.isystkSlider img{
  vertical-align: middle;
}

/* controls */
.isystkSlider .prev-btn,
.isystkSlider .next-btn{
  position: absolute;
  top: 50%;
  margin-top: -1em;
  width: 30px;
}

.isystkSlider .prev-btn img,
.isystkSlider .next-btn img{
  width: 30px;
}

.isystkSlider .next-btn{
  right: 0;
}

.isystkSlider .paging {
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 6px;
  width: 565px;
}

.isystkSlider .paging p{
  margin:0 5px 0 0;
  border:solid 1px #dedede;
  background:#fff;
  padding:3px;
}

.isystkSlider .paging.dot {
  width: 24%;
  margin: 5px auto;
}

.isystkSlider .paging.dot li {
  border: 1px solid #666;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  list-style-type: none;
}

.isystkSlider .paging.dot li.active {
  background: #666;
}

5. Call the plugin on the top container to generate a default carousel slider.

var slider = $('.js-slider').isystkSlider({
    // options here
});

6. Enable the pagination & navigation controls.

var slider = $('.js-slider').isystkSlider({
    'prevBtnKey': $(this).find('.prev-btn'),
    'nextBtnKey': $(this).find('.next-btn'),
    'slideCallBack': function(data) {
      slider.find('.paging li').removeClass('active');
      slider.find('.paging li:eq('+(data.pageNo-1)+')').addClass('active');
    }
});

slider.find('.paging li').click(function(e) {
  e.preventDefault();
  slider.changePage($(this).data('pageno'), $.fn.isystkSlider.ANIMATE_TYPE.SLIDE);
});
if (0 < self.find('.prev-btn').length) {
  self.find('.view-layer').css({
    'margin-left': '36px'
  });
}

7. Full plugin options to customize the carousel slider.

var slider = $('.js-slider').isystkSlider({

    // parent container
    'parentKey': 'ul', 

    // child element
    'childKey': 'li',
    
    // the number of slides to show per page
    'shift': 1, 

    // the number of image to slide at a time
    'dispCount': null,

    // width to slide
    'shiftw': null,
    
    // or ANIMATE_TYPE.FADE
    'animateType': ANIMATE_TYPE.SLIDE,

    // animation speed
    'slideSpeed': 300

    // infinite rotating
    'carousel': false,

    // prev/next buttons
    'prevBtnKey': '.prev-btn', 
    'nextBtnKey': '.next-btn',

    // autoplay options
    'autoSlide': false,
    'autoSlideInterval': 5000, 
    'hoverPause': false, 

    // enables touch swipe
    'isMouseDrag': false, 

    // width of rebound when swiping
    'reboundw': 50,

    // enables momentum scrolling on touch screens.
    'moment': false,

    // displays images in fullscreen mode
    'isFullScreen': false,

    // space between elements
    'margin': 0, 

    // auto adapts the image to the screen height
    'heightMaxScreen': false, 

    // callback functions
    'slideCallBack': null, 
    'resizeCallBack': null
    
});

---

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