Panels.

About

Navigate through some panels. This is a simple implemenation that requires using the API to navigate (ie. previous, next, or indicator bullets). For a touch-enabled option, see the Carousel.

Demo

Sliding transition

---

Fade transition

---

Multiple transitions

Code

Javascript

Basic set up

	var container = document.querySelector('#demo .panels');
	var panels = new Panels(container, {
		slides: ".panel",
	});
				

Bullet Navigation

	// example with bullet navigation
	var container = document.querySelector('#demo .panels');
	var bullets = document.querySelectorAll('#demo nav li');
	var panels = new Panels(container, {
		slides: ".panel",
		onSlide: function(to, from){
			bullets[from].className = '';
			bullets[to].className = 'active';
		}
	});

	// set up navigation UI
	Array.prototype.forEach.call(bullets, function(item, index){
		item.addEventListener('click', function(e) {
			e.preventDefault();
			panels.go(index);
		});
	});
				

Sample Previous & Next buttons

	// example with previous and next button functionality
	var prev = document.querySelector('#demo .prev');
	var next = document.querySelector('#demo .next');

	prev.addEventListener('click', function(e) {
		e.preventDefault();
		panels.go(panels.current - 1);
	});

	next.addEventListener('click', function(e) {
		e.preventDefault();
		panels.go(panels.current + 1);
	});
				

Prereqs

none.

Compatibility

• IE9+
• Firefox, Webkit, Opera
• no mobile

Options