Draggable & Touch-enabled Carousel Slider - jQuery slider-x

slider-x is a simple-to-use jQuery plugin for creating a responsive, draggable/swipeable, mobile-friendly, auto-rotating carousel slider on the web application.

Features:

• Allows you to specify the number of slides to show per screen.
• Allows you to specify the number of slides to slide at a time.
• Infinite loop just like a carousel.
• Custom pagination/navigation styles.
• Automatically adjusts the height according to the slide content.

How To Use It:

1. Download and import the slider-x plugin's files from the dist folder.

<link rel="stylesheet" href="/dist/slider-x.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/dist/slider-x.js"></script>

2. Or from the CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slider-x@latest/dist/slider-x.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slider-x@latest/dist/slider-x.min.js"></script>

3. Add a group of slides to the slider.

<div class="mySlider">
  <div class="slide-1"></div>
  <div class="slide-2"></div>
  <div class="slide-3"></div>
  ...
</div>

4. Initialize the slider-x by calling the function on the top container. Done.

$('.mySlider').pageflySlider();

5. Possible options to config the slider.

$('.mySlider').pageflySlider({

  // initial slide on page load
  curr: 0,

  // the number of slides to show per screen
  slidesToShow: 1,

  // the number of slides to scroll at a time
  slidesToScroll: 1,

  // the space between slides
  gutter: 15,

  // enable/disable autoplay
  autoPlay: true,

  // autoplay interval
  autoPlayDelay: 3000,

  // the duration of the animation
  duration: 450,

  // enable/disable infinite loop
  loop: true,

  // enable/disable draggable
  draggable: true,

  // pagination (1-3)
  paginationStyle: 'pagination-style-1',

  // navigation styles (1-5)
  navStyle: 'nav-style-1',

  // enable/disable adaptive height
  adaptiveHeight: false,

  // the height of the slider
  height: 400
  
});

---

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