Press "Enter" to skip to content

How to Create a Horizontal Content Slider Using Plugin | x-rhyme.js

X-Rhyme is a lightweight jQuery plugin to create a horizontal content slider where users can scroll through slides using the mouse wheel, arrow keys, or by clicking the anchor and pages controls.

content slider in html, horizontal scroll carousel, content carousel slider plugin, content slider javascript, content slider html css

How to make use of it:

1. Load the newest 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 achieved it.

$(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 utilizing 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 perform 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 mouse wheel speed (0-1).

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

8. Specify the animation speed.

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

9. Trigger a perform after the transition is completed.

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

Horizontal Content Slider In jQuery, x-rhyme JS Plugin/Github


See Demo And Download

Official Website(jqueryscript): Click Here

This superior jQuery/javascript plugin is developed by jqueryscript. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *