Touchable Fullscreen Content Slider Plugin For jQuery - Distractful

Distractful is a JQuery slider plugin which lets you create a responsive, fullscreen, touch-enabled content slider / carousel with minimal html markup. Licensed under the GNU GENERAL PUBLIC LICENSE Version 3.

Key Features:

• Custom scroll speed.
• Easing effects based on jQuery easing plugin.
• Autoplay with custom direction.
• Pagination and navigation controls.
• Supports touch events for mobile.
• Callback functions.

How to use it:

1. Make sure jQuery library is included in your page, then include the distractful.js and distractful.css before the </body> tag.

<link rel="stylesheet" href="src/css/distractful.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/js/distractful.js"></script>

2. Include the jQuery easing plugin for more easing effects.

<script src="jquery.easing.js"></script>

3. The basic Html structure to create a container slider.

<div class="distractful">

  <div class="distractful-item">
      Slide Item 1
  </div>

  <div class="distractful-item">
      Slide Item 2
  </div>

  <div class="distractful-item">
      Slide Item 3
  </div>
  
  ...

</section>

4. Call the function on the top container to initialize the content slider with default settings.

$('.distractful').distractful();

5. All default configuration options.

$('.distractful').distractful({

  // parallax effect. true or false
  parallax:  false,

  // moving || true || false. use false to hide
  controls: 'moving',  
  controlRight: false,
  controlLeft: false, 

  // scroll speed
  scrollSpeed: 1000,

  // autoplay
  auto:false,

  // how long until next slide
  pauseTime: 5000,

  // shows the pagers
  showPagers: true,

  // uses an easing function. requires jQuery Easing library. 
  // Set to 'false' to disable, will use jQuery animate
  easing: 'easeInCubic',

  // hovers over distractful to stop auto-play
  hoverPause: false, 

  // turn on touch events for mobile
  touch: true,

  // enable keypress navigation
  keyPress: false,
  
  // callback functions
  imageLoaded : '',
  slideComplete : '',
  slideRight : '',
  slideLeft : '',
  beforeSlide: ''

});

Change log:

2016-05-18

• JS update

---

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