Mustang.js - Simple slide plugin -

DEMO

Simple slide plugin with CSS3 + a bit of pure JS(yes, without jQuery! and 2.4kb minified!)

How to use

Add mustang.min.js to your file then, call the plugin(these also are the defaults)

<script>
	Mustang('.parent', {
		item: '.item',
		time: 2500,
		height: 300, // parent height, children will have 100%
		transition: '1s ease 0.1s', // css3 transition for slide items
		next: false, // next button, optional
		prev: false // prev button, optional
	})
</script>

You don't need to set next and prev, but if you want have buttons you must active both.

Mustang sets CSS for parent/children automatically, the CSS attributes are:

.parent {
	position: relative;
	display: flex;
	flex-flow: nowrap row;
	overflow: hidden;
	box-sizing: border-box;
	height: 300px;
}

.child {
	flex: 0 0 100%;
	height: 100%;
	box-sizing: border-box;
	transition: all 1s ease 0.1s;
	transform: translateX(-100%); // when sliding
}

Hey dude, I'm having some problems...

Just open an issue and let's solve it!

See also

1. Complete Sublime SCSS
2. Dragon - Jekyll Theme

License

MIT License