Tiny jQuery Content Slider/Scroller with Scrolling Navigation - sliderFlow

A small jQuery responsive slider/scroller plugin which allows you to navigate through a series of items with a jQuery UI based slider control.

How to use it:

1. Include the necessary jQuery and jQuery UI in your Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

2. Include the jQuery sliderFlow plugin's stylesheet and script after jQuery library.

<link rel="stylesheet" href="style.css">
<script src="jquery.sliderFlow.js"></script>

3. Insert a series of slider content into your page as follows.

<div id="slider">
  <ul class="slider-container">
    <li class="slide">
      <div class="slide-image"> <img src="1.jpg" alt=""> </div>
      <div class="slide-description">
        <h6 class="slide-title">SlideTitle 1</h6>
        <p>Description 1.</p>
        <a href="#" class="slide-morelink">View more</a> </div>
    </li>

    <li class="slide">
      <div class="slide-image"> <img src="2.jpg" alt=""> </div>
      <div class="slide-description">
        <h6 class="slide-title">SlideTitle 2</h6>
        <p>Description 2.</p>
        <a href="#" class="slide-morelink">View more</a> </div>
    </li>

    <li class="slide">
      <div class="slide-image"> <img src="3.jpg" alt=""> </div>
      <div class="slide-description">
        <h6 class="slide-title">SlideTitle 3</h6>
        <p>Description 3.</p>
        <a href="#" class="slide-morelink">View more</a> </div>
    </li>
  </ul>
</div>

3. Create an empty container to place the jQuery UI slider widget.

<div class="slider-navigation"></div>

4. Initialize the plugin to active the content slider/scroller.

$('#slider').sliderFlow({
  'container' : '.slider-container',
  'navigation' : '.slider-navigation',
  'slide': '.slide',
  'speed': 300
});

5. All the parameters.

// <ul> containter class
'container' : '.slider-container',

// class for navigation line
'navigation' : '.slider-navigation',

// class one slide
'slide': '.slide',

sets the height of each cell is the largest cell
'equalHeight': true,

// speed of transition to new slide
'speed': 300

Change log:

2015-03-28

• new parameter {equalHeight : true}. Sets the height of each cell is the largest cell

---

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