Horizontal Content Slider In jQuery - x-rhyme.js

x-rhyme.js is a lightweight jQuery plugin to create a horizontal content slider where users can slide through slides with mouse wheel, arrow keys, or by clicking anchors & pagination controls.

How to use it:

1. Load the latest version of the x-rhyme.js plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.xrhyme.js"></script>
<link rel="stylesheet" href="/path/to/xrhyme.demo.css" />

2. Add slides to the x-rhyme content slider as follows:

<div id="XContainer" class="x_container">

  <article class="x_item">
    <h2>Article title 1</h2>
    <p>Article Content 1</p>
  </article>

  <article class="x_item">
    <h2>Article title 2</h2>
    <p>Article Content 2</p>
  </article>

  <article class="x_item">
    <h2>Article title 3</h2>
    <p>Article Content 3</p>
  </article>

  <article class="x_item">
    <h2>Article title 4</h2>
    <p>Article Content 4</p>
  </article>

  <article class="x_item">
    <h2>Article title 5</h2>
    <p>Article Content 5</p>
  </article>
 
  ...

</div>

3. Call the function on the top container and done.

$(function(){
  $('.x_container').xrhyme();
});

4. Add pagination controls to the content slider.

<nav>
  <ul>
    <li class="anchor"><a href="#0">1</a></li>
    <li class="anchor"><a href="#1">2</a></li>
    <li class="anchor"><a href="#2">3</a></li>
    <li class="anchor"><a href="#3">4</a></li>
    <li class="anchor"><a href="#4">5</a></li>
  </ul>
</nav>

$(function(){
  $('.x_container').xrhyme({
    navigationSelector : 'nav li'
  });
});

5. Navigate between slides using anchor links.

<div id="XContainer" class="x_container">

  <article class="x_item">
    <h2>Article title 1</h2>
    <p>Article Content 1</p>
    <p class="anchor"><a href="#1">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 2</h2>
    <p>Article Content 2</p>
    <p class="anchor"><a href="#2">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 3</h2>
    <p>Article Content 3</p>
    <p class="anchor"><a href="#3">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 4</h2>
    <p>Article Content 4</p>
    <p class="anchor"><a href="#4">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 5</h2>
    <p>Article Content 5</p>
    <p class="anchor"><a href="#0">« Back</a></p>
  </article>
 
  ...

</div>

$(function(){
  $('.x_container').xrhyme({
    navigationSelector : '.anchor a',
    anchorMode : true
  });
});

6. Apply an easing function to the scrolling transition. Require the jQuery easing plugin.

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

$(function(){
  $('.x_container').xrhyme({
    easing : 'swing'
  });
});

7. Determine the mousewheel speed (0-1).

$(function(){
  $('.x_container').xrhyme({
    wheelSpeed : 0.5
  });
});

8. Specify the animation speed.

$(function(){
  $('.x_container').xrhyme({
    animationTime : 600
  });
});

9. Trigger a function after the transition is finished.

$(function(){
  $('.x_container').xrhyme({
    animeComplete : function(){
      // do something
    }
  });
});

---

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