Lightweight Touchable jQuery Carousel / Slider Plugin - Slydeshow

Slydeshow is an easy, lightweight jQuery plugin used for generating an infinite-looping, mobile/touch-friendly carousel slider that supports any types of content such as images, text, iframes, videos and many more.

How to use it:

1. To get started, make sure to load the following files loaded properly in the html document.

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

2. Load the jQuery easing plugin for extra easing functions support.

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

3. The primary HTML structure for the carousel slider. You're allows to config the animations for each slide using HTML5 data attributes as follows:

<div id="main-slideshow">
  <ul>
    <li>
      <div class="video">
        <div class="video-container">
          <iframe width="560" height="315" src="http://www.youtube.com/embed/Fgw0CHRLBjE" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="video-description">
          <h1 data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-easing="easeOutExpo">Rising: Rebuilding Groun
            Zero</h1>
          <div class="video-lede" data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-delay="300" data-easing="easeOutExpo">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum ligula aliquam dictum. Vestibulum dui nisl, volutpat et molestie quis, mollis sed nulla. Aenean at tortor dui. Mauris sit amet justo arcu. Pellentesque hendrerit, enim tristique ultricies luctus, odio tellus tempus nulla, eu commodo nisi erat at lacus.</p>
          </div>
        </div>
      </div>
      <!-- video --> 
    </li>
    <li>
      <div class="video">
        <div class="video-container">
          <iframe width="560" height="315" src="http://www.youtube.com/embed/BT07QRJ5_s0" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="video-description">
          <h1 data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-easing="easeOutExpo">Sheriff of Ghost Town</h1>
          <div class="video-lede" data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-delay="300" data-easing="easeOutExpo">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum ligula aliquam dictum. Vestibulum dui nisl, volutpat et molestie quis, mollis sed nulla. Aenean at tortor dui. Mauris sit amet justo arcu. Pellentesque hendrerit, enim tristique ultricies luctus, odio tellus tempus nulla, eu commodo nisi erat at lacus.</p>
          </div>
        </div>
      </div>
      <!-- video --> 
    </li>
    <li>
      <div class="video">
        <div class="video-container">
          <iframe width="560" height="315" src="http://www.youtube.com/embed/fRim-Lzko1Q" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="video-description">
          <h1 data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-easing="easeOutExpo">Super Sellers</h1>
          <div class="video-lede" data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-delay="300" data-easing="easeOutExpo">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum ligula aliquam dictum. Vestibulum dui nisl, volutpat et molestie quis, mollis sed nulla. Aenean at tortor dui. Mauris sit amet justo arcu. Pellentesque hendrerit, enim tristique ultricies luctus, odio tellus tempus nulla, eu commodo nisi erat at lacus.</p>
          </div>
        </div>
      </div>
      <!-- video --> 
    </li>
    <li>
      <div class="video">
        <div class="video-container">
          <iframe width="560" height="315" src="http://www.youtube.com/embed/MkwnTjHT-_c" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="video-description">
          <h1 data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-easing="easeOutExpo">Model Pups</h1>
          <div class="video-lede" data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-delay="300" data-easing="easeOutExpo">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum ligula aliquam dictum. Vestibulum dui nisl, volutpat et molestie quis, mollis sed nulla. Aenean at tortor dui. Mauris sit amet justo arcu. Pellentesque hendrerit, enim tristique ultricies luctus, odio tellus tempus nulla, eu commodo nisi erat at lacus.</p>
          </div>
        </div>
      </div>
      <!-- video --> 
    </li>
  </ul>
  <div class="slydeshow-controls"> <a href="#" class="arrow-prev">&nbsp;</a>
   <a href="#" class="arrow-next">&nbsp;</a> </div>
</div>

4. Invoke the carousel plugin with default options.

$('#main-slideshow').slydeshow();

5. Available options.

• duration: Int - time transition takes in milliseconds
• easing: String - slide transition easing (see http://easings.net/ for easing examples)
• arrowContainer: HTML element - defines element that contains next and previous arrows. Used when arrows must be outside the slydeshow div.
• touchable: Boolean - defines whether slideshow responds to touch events
• touchTarget: HTML element - defines element to be used as touchable area
• clickCallback: Function - method to call on interface click event (will fire on arrow or pill button click)
• changeCallback: Function - method to call on slide change complete

---

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