Hubeleke jQuery Horizontal Item Slider

Hubeleke jQuery Horizontal Item Slider is a carousel like plugin that helps you to display your item lists in a scrollable area. Plugin turns ul list element into a scrollable structure. User can scroll to view items via scroll bar, direction buttons or mousewheel. In mobile devices, the plugin supports swipe action to scroll.

Features

Installing Files

Installing the jQuery Horizontal Item Slider is so easy. Just add these following codes inside <head> of your web page.

<link href="css/jquery.horizontal.slider.css" rel="stylesheet" />
<script src="js/jquery.horizontal.slider.js" type="text/javascript"></script>

You need to load all these files to install the plugin properly. Also Hubeleke jQuery Horizontal Item Slider requires jQuery 1.7 or later to work. You'll also need jQuery mousewheel plugin to scroll via mouse wheel. Add the mousewheel plugin code after the main codes.

<script src="js/jquery.mousewheel.min.js"></script>

Usage

For the HTML markup, you'll need to create a div with an id, and add a ul list inside of it.

<div id="horizontal-slider">
    <ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci animi autem consequatur!</li>
	<li>Cupiditate debitis  deleniti dolore dolorem doloribus dolorum eligendi est, et fugiat iusto nertu?</li>
	<li>Labore laboriosam molestiae nisi nobis officia omnis quae quam, similique voluptatum. Beatae dolor?</li>
	<li>Enim non nulla praesentium repellat sunt ut? A autem deserunt dolor incidunt ipsam ipsum laborum.</li>
	<li>Necessitatibus nisi, omnis quas recusandae reiciendis! Aliquid commodi consequatur doloremque!</li>
	<li>Fugiat iusto necessitatibus nobis odio, quas ratione vel! Cumque fugiat magni natus necessitatibus nisi.</li>
	<li>Perspiciatis provident quasi voluptatem? Alias aperiam, commodi dolor eligendi ipsum?</li>
    </ul>
</div>
		

How to Initialize

The basic initialization:

<script type="text/javascript">
    $(function() {
	$('#horizontal-slider').hSlider();
    });
</script>

		

You can use these options to customize plugin properties:

<script type="text/javascript">
    $(function() {
	$('#horizontal-slider').hSlider({
	    itemHeight		: 'auto',
	    itemMargin		: 5,
	    itemPadding		: 5,
	    itemVisible		: 4,
	    controlScroll	: true,
	    controlDirection	: true,
	    snapToItem		: true,
	    wheelStep		: 10,
	    buttonStep		: 20,
	    itemBgColor		: '#f3f3f3',
	    itemBorderColor	: '#ccc',
	    itemBorderSize	: 1,
	    scrollColor		: '#999',
	    scrollSize		: 2,
	    railColor		: '#ddd',
	    railBorderRadius	: 1,
	    onBeforeLoad	: function() {},
	    onAfterLoad		: function() {},
	    onEndOfList		: function() {}
	});
    });
</script>

		

This is the basic initialization (a news list example):

  • Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci animi autem... details >
  • Aperiam debitis enim
    Cupiditate debitis deleniti dolore dolorem doloribus dolorum eligendi est, et fugiat iusto nertu... details >
  • Ad doloremque
    Labore laboriosam molestiae nisi nobis officia omnis quae quam, similique voluptatum. Beatae dolor... details >
  • Odit perferendis
    Enim non nulla praesentium repellat sunt ut? A autem deserunt dolor incidunt ipsam ipsum... details >
  • Eligendi in laborum
    Necessitatibus nisi, omnis quas recusandae reiciendis! Aliquid commodi consequatur doloremque... details >
  • Sit temporibus!
    Fugiat iusto necessitatibus nobis odio, quas ratione vel! Cumque fugiat magni natus necessitatibus nisi... details >
  • Distinctio dolor ea
    Perspiciatis provident quasi voluptatem? Alias aperiam, commodi dolor eligendi ipsum... details >

Examples

Photo gallery

You can generate a photo gallery with hSlider. You also can also use them with a lightbox or a tooltip plugin.

Code:

<script type="text/javascript">
    $(function() {
	$('#example1').hSlider({
	    itemVisible		: 3,
	    controlScroll	: false,
	    snapToItem		: false,
	    buttonStep		: 100,
	    wheelStep		: 25
	});
    });
</script>

		

Portfolio List

You can show your works or introduce your team.

  • Hubeleke
    Web Developer
  • Steve Jobs
    Apple CEO
  • Michael Jackson
    Singer & Dancer
  • Jessie J.
    Singer
  • The Joker
    Villain
  • Monkey D. Luffy
    Captain Pirate
  • Angelina Jolie
    Actress
  • Ozzy Osbourne
    Singer
  • Hermione
    Witch
  • Charles Chaplin
    Comedian
  • Sheldon Cooper
    Physicist
  • Naruto
    Shinobi
  • You
    Customer =]

Code:

<script type="text/javascript">
    $(function() {
	$('#example2').hSlider({
	    itemHeight		: 255,
	    itemPadding		: 10,
	    itemVisible		: 5,
	    itemBgColor		: 'transparent',
	    itemBorderColor	: '#b8cee0',
	    itemBorderSize	: 2,
	    scrollColor		: '#4da7ed',
	    scrollSize		: 5,
	    railColor		: '#b8cee0',
	});
    });
</script>

		

Events and Methods

The plugin has 3 events and 1 method. The events are onBeforeLoad, onAfterLoad and onEndOfList. You can use the addItem method to add new items to your list.

<script type="text/javascript">
    $(function() {
	var myPlugin = $(selector).hSlider();

	// adding a single item
	myPlugin.addItem('Adipisci debitis dicta facere laudantium magni nobis quaerat quas sint tempora ut!');

	// adding multiple items
	myPlugin.addItem([
	    'Asperiores cum dicta est exercitationem magnam officiis placeat porro repudiandae tenetur, totam.',
	    'Ad aliquam culpa dicta ipsa. Esse ipsam perspiciatis sint veritatis! Aut, cumque.',
	    'Aperiam architecto eius, eligendi exercitationem fuga hic illo non optio quod voluptatum.'
	]);
    });
</script>

		

This example generates console logs with plugin events. You can see logs via pressing F12 and choosing console tab on the developer window. Also clicking the buttons under the example will add new item(s).

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci animi autem consequatur!
  • Cupiditate debitis deleniti dolore dolorem doloribus dolorum eligendi est, et fugiat iusto nertu?
  • Labore laboriosam molestiae nisi nobis officia omnis quae quam, similique voluptatum. Beatae dolor?
  • Enim non nulla praesentium repellat sunt ut? A autem deserunt dolor incidunt ipsam ipsum laborum.
  • Necessitatibus nisi, omnis quas recusandae reiciendis! Aliquid commodi consequatur doloremque!
  • Fugiat iusto necessitatibus nobis odio, quas ratione vel! Cumque fugiat magni natus necessitatibus nisi.
  • Perspiciatis provident quasi voluptatem? Alias aperiam, commodi dolor eligendi ipsum?

Code:

<script type="text/javascript">
    $(function() {
	var example3 = $('#example3').hSlider({
	    onBeforeLoad: function() {
		start	= new Date().getTime();
		console.log('onBeforeLoad: Plugin starts initializing.');
	    },
	    onAfterLoad	: function() {
		end	= new Date().getTime();
		console.log('onAfterLoad: Plugin initialized in ' + ( ( end -  start ) / 10 ) + ' seconds.');
	    },
	    onEndOfList	: function() {
		console.log('onEndOfList: Reached end of the list');
	    }
	});

	$('.add-item').click(function() {
	    exapmle3.addItem('This single item added by addItem method. Method triggered by button click event.');
	});

	$('.add-items').click(function() {
	    exapmle3.addItem([
		'This is the first item of 3 items that added by addItem method. Method triggered by button click event.',
		'This is the second item of 3 items that added by addItem method. Method triggered by button click event.',
		'This is the third item of 3 items that added by addItem method. Method triggered by button click event.'
	    ]);
	});
    });
</script>

		

Configuring Options

Option Default Value Data Type Description
itemHeight auto Number The height value of items. If not set, each item will be on it's own content height.
itemMargin 5 Number Left and right margin value of each item. Ex: If you set margin 10, there will be 20px empty space between each item.
itemPadding 5 Number Padding value of items.
itemVisible 4 Number The visible item count in the slider. It must be a smaller value than item count.
controlScroll true Boolean The option to enable/disable scrollbar.
controlDirection True Boolean The option to enable/disable direction buttons.
snapToItem true Boolean The option to set continuous scroll or scroll items step by step. false: continuous scroll, true: item step
wheelStep 10 Number The pixel rate of each wheel scroll on continuous scroll mode. If snapToItem is true, this option will not work.
buttonStep 20 Number The pixel rate of each direction button scroll on continuous scroll mode. If snapToItem is true, this option will not work.
itemBgColor "#f3f3f3" String The background color of items. If you set it to "transparent", items will have no background.
itemBorderColor "#ccc" String The border color of items.
itemBorderSize 1 Number The size of the item border. If you set it to 0, items will have no border.
scrollColor "#999" String The color of scroll bar.
scrollSize 7 Number The height of scroll. If you set it to 0, scroll will be invisible.
railColor "#ddd" String The color of the scroll rail.
railBorderRadius 3 Number Border radius for the scroll bar and the scroll rail.
onBeforeLoad Null Function Function that triggers before the plugin starts initializing.
onAfterLoad Null Function Function that triggers after the plugin finishes initializing.
onEndOfList Null Function Function that triggers when the plugin list reaches to the end.