Carousel

carousel.markdown

Carousel

A simple vanilla JS carousel/image slider

Clicking the "beads" directly is still buggy

A Pen by Charles Ojukwu on CodePen.

License.

index.html

<h1>JS Carousel/Slider</h1>
<section class="slider" id="slider">
	<ul class="slides">
		<li>
			<h2>Slide 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore natus maxime asperiores iure distinctio voluptatum dolore eveniet ullam quibusdam nobis ducimus odit adipisci, officiis quasi quos commodi aliquid delectus.</p>
			<p>Accusamus molestias impedit tempore similique, provident veniam sit reiciendis ex. Reprehenderit dolorum impedit odio nulla eligendi deleniti, ab repellendus, eveniet rerum ipsa distinctio adipisci dolore est. Perspiciatis fuga labore voluptatibus!</p>
			<p>Deserunt facilis quisquam quis sunt exercitationem, aut delectus sed quae, consequuntur eum, impedit ab tempore molestiae cum natus minus, laudantium id aliquid explicabo eius! Numquam esse delectus atque molestias, iusto.</p>
		</li>
		<li>
			<h2>Slide 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis iusto consequuntur culpa minima, facilis expedita repellendus magnam consequatur ratione pariatur reiciendis, dolorem atque nesciunt veniam quos ducimus, corporis quisquam voluptas!</p>
			<p>Nesciunt vero, debitis quo, voluptates repudiandae quam. Veniam deleniti, ut optio facere labore nam quibusdam aliquid. Provident numquam totam facilis nihil quis? Dolorum dignissimos maxime et quam reiciendis porro vel.</p>
			<p>Aliquam molestiae possimus laborum eius ullam fugiat fuga atque, temporibus mollitia, maiores dolor optio qui illo nemo, eaque explicabo totam esse enim officia harum sequi rerum odit eum magnam! Dignissimos!</p>
		</li>
		<li>
			<h2>Slide 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque odio quisquam, eveniet provident est nemo nesciunt? Blanditiis nemo quidem facilis, quasi dolor quos necessitatibus. Fugiat autem nihil eligendi, a voluptas.</p>
			<p>Suscipit debitis, iste? Suscipit nulla eveniet recusandae? Ex aliquid necessitatibus, fugiat enim ullam, laboriosam, nam explicabo dolorem cupiditate minus nemo, labore repellendus. Iure molestiae autem, quis dolore blanditiis delectus cupiditate.</p>
			<p>Fugiat accusamus earum in. Neque aperiam soluta error eaque enim animi alias molestiae, et unde provident cupiditate ad mollitia deleniti cum obcaecati hic. Deleniti dolorum placeat, ad consequuntur, reprehenderit atque!</p>
		</li>
		<li>
			<h2>Slide 4</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia magni labore consectetur earum soluta quis, perferendis quo odit commodi sequi reiciendis accusantium dolore doloribus iure. Quis nisi velit voluptatum tenetur.</p>
			<p>Alias molestias, natus eveniet rem temporibus fuga veritatis cupiditate quos. Molestiae ipsa quia magnam ratione, porro libero minus, consequuntur, enim facere consequatur placeat velit quam repellat. Odit libero, distinctio saepe!</p>
			<p>Facere odit, cumque corrupti minus earum deserunt aperiam id ipsa eligendi adipisci sint, consectetur eaque in. Mollitia ullam, quam nisi autem. Minima autem reiciendis temporibus hic itaque, libero vitae porro?</p>
		</li>
	</ul>
  <ul class="beads"></ul>
	<button id="prev-btn">&#10094;</button>
	<button id="next-btn">&#10095;</button>
</section>

script.js

(function () {
	"use strict";

	var slider,lBtn,rBtn,numSlides,slides,beads;
	var cur = 0;

	function init () {
		slider = $id("slider");
		lBtn = $id("prev-btn");
		rBtn = $id("next-btn");
		slides = slider.getElementsByTagName('ul')[0];
		beads = slider.getElementsByTagName('ul')[1];
		numSlides = slides.getElementsByTagName('li').length;

		for (var i = 0; i < numSlides; i++) {
			var temp = document.createElement('li');
			var tempBtn = document.createElement('button');
			beads.appendChild(temp);
			beads.appendChild(document.createTextNode("\n"));
			temp.appendChild(tempBtn);
			//temp.className = "bead";
			(function (j) {
				tempBtn.addEventListener("click",function(){
					cur = j;
					update();
					console.log("poo"+j);
				},false);
			})(i);
			
		}
		rBtn.addEventListener("click",next,false);
		lBtn.addEventListener("click",prev,false);
		update();
	}

	function $id(val) {
		return document.getElementById(val);
	}

	function next() {
		cur = cur + 1;
		update();
	}

	function prev() {
		cur = cur - 1;
		update();
	}

	function update() {
		if (cur >= numSlides) {
			cur = 0;
		}
		if (cur < 0) {
			cur = numSlides-1;
		}
		for (var i = 0; i < numSlides; i++) {
			if (cur == i) {
				slides.getElementsByTagName('li')[i].className = "active-slide";
			}
			else if (cur == (i+1)) {
				slides.getElementsByTagName('li')[i].className = "prev-slide";
			}
			else if (cur == (i-1)) {
				slides.getElementsByTagName('li')[i].className = "next-slide";
			}
			else {
				slides.getElementsByTagName('li')[i].className = "";
			}

			/*switch (cur) {
				case i:
					break;
				case (i - 1):
					break;
				case (i + 1):
			}*/

			if (cur == i) {
				beads.getElementsByTagName('li')[i].className = "active";
			}
			else {
				beads.getElementsByTagName('li')[i].className = "";
			}
		}
		if (cur == (numSlides - 1)) {
			slides.getElementsByTagName('li')[0].className = "next-slide";
		}

		if (cur == 0) {
			slides.getElementsByTagName('li')[(numSlides - 1)].className = "prev-slide";
		}
		console.log(cur);
	}

	document.addEventListener("DOMContentLoaded", init, false);
})();

style.css

*,*:before,*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  background: #eee;
  color: #333;
}

h1 {
  text-align: center;
}

button {
	cursor: pointer;
	outline: none;
}

.slider {
	height: 500px;
	width: 100%;
  max-width: 960px;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.slides {
	height: 100%;
	padding: 0;
	margin: 0;
}

.slides li {
	text-decoration: none;
	list-style-type: none;
  color: #fff;
	padding: 1rem 3rem;
	margin: 0;
	height: 100%;
	position: absolute;
	display: none;
	transition: transform 500ms ease;
}

.slides li:nth-child(even) {
	background: linear-gradient(to bottom right,#d46,#75b);
}

.slides li:nth-child(odd) {
	background: linear-gradient(to bottom right,#46d,#4ba);
}

li.prev-slide, li.active-slide, li.next-slide {
	display: block;
	top: 0;
}

li.prev-slide {
	//left: -100%;
  transform: translateX(-100%);
}

li.active-slide {
	left: 0;
}

li.next-slide {
	//left: 100%;
  transform: translateX(100%);
}

.slider > button {
	position: absolute;
	top: 0;//calc(50% - 1.75rem);
	border: none;
	padding: 0 1rem;
  font-size: 2rem;
  height: 100%;
  line-height: 100%;
	color: #fff;
	background: rgba(0,0,0,0);
	transition: 200ms ease;
}

.slider > button:hover {
  background: rgba(0,0,0,0.25);
}

.slider > button:first-of-type {
	left: 0;
}

.slider > button:last-of-type {
	right: 0;
}

.beads {
	position: absolute;
	bottom: 1.5rem;
	display: block;
	text-align: center;
	width: 100%;
	height: 10px;
	padding: 0;
	margin: 0;
}

.beads li {
	display: inline-block;
	width: 10px;
	height: 10px;
	padding: 0;
	margin: 0 0.5rem;
	text-align: center;
}

.beads li button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	border: none;
	padding: 0;
	margin: 0 auto;
	transition: 300ms ease;
	vertical-align: middle;
	opacity: 0.4;
}

.beads li.active button {
	border-radius: 5px;
	opacity: 1;
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />