Mootools 1.2 cvStepSlider class

This slider slides trough your image. Choose a vertical or horizontal slider. Load a item form a anchor url and save the visited items in a cookie!

See the demo Download file

The css

.index_button {
	width: 30px;
	height: 126px;
	float: left;
	cursor: pointer;
	}

.prev {
	background: #FFF url(images/index_prev.jpg) center right no-repeat;
	margin-right: 10px;
	}

.prev_hover {
	background: #FFF url(images/index_prev_h.jpg) center right no-repeat;
	}

.next {
	background: #FFF url(images/index_next.jpg) center left no-repeat;
	margin-left: 10px;
	}

.next_hover {
	background: #FFF url(images/index_next_h.jpg) center left no-repeat;
	}

#portfolio_index, #portfolio_index2 {
	padding-top: 10px;
	width: 700px;
	height: 115px;
	float: left;
	overflow: hidden;
	}

#portfolio_index3 {
	width: 140px;
	height: 105px;
	float: left;
	overflow: hidden;
	}

#portfolio_index ul li, #portfolio_index2 ul li, #portfolio_index3 ul li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	cursor: pointer;
	}

.item_hover {
	border: 1px #CCC solid;
	}

.loading {
	background:url(images/ajax-loader.gif) center center no-repeat;
	}

.active {
	border: 1px #F8991D solid;
	}

The html

The usage

See the example for the usage of the visited items using a Cookie.

window.addEvent('domready', function() {
	var slider = new cvStepSlider({
		wrapper: 'portfolio_index',
		list: 'items',
		items: '#portfolio_index ul li img',
		itemWidth: 140,
		itemHeight: 105,
		startSlide: 1,
		type: 'horizontal',
		step: 'item',
		nextbutton: 'next',
		prevbutton: 'prev',
		log: true,
		result: 'res',
		preloadImages: ['images/index_next_h.jpg','images/index_next.jpg','images/index_prev_h.jpg','images/index_prev.jpg']
	});
});

Related Posts

• Mootools 1.2 cvSlideShow class (0)
• Mootools 1.2+ Drag.Cart Demo (0)
• Mootools 1.2 cvLinkSelect class 1.2 (0)
• Mootools 1.2 cvLinkSelect class 1.1 (0)
• Mootools 1.2 cvLinkSelect class (34)
• Mootools 1.2 cvElementAppear class (0)
• Mootools 1.2 cvNewsTicker class (12)
• Mootools 1.2 cvRelativeTop class (0)

Leave a Comment

Get your own Gravatar!
Your email will never be published!