A Pen by Saminou yengue kizidi.

index.html

<div class="holder">
  <div id="left" class="arrow"></div>
  
  <div id="banner">
    <img src="http://placehold.it/625x235/123987/fff" alt="" />
    <img src="http://placehold.it/625x235/987123/fff" alt="" />
    <img src="http://placehold.it/625x235/149941/fff" alt="" />
    <img src="http://placehold.it/625x235/abc987/fff" alt="" />
    <img src="http://placehold.it/625x235/912abc/fff" alt="" />
    <img src="http://placehold.it/625x235/ff3333/fff" alt="" />
  </div>
 
  <div id="right" class="arrow"></div>
  
  
  <a href="http://twitter.com/fernandoporazzi">@fernandoporazzi</a>
</div>

Pure-Javascript-Banner-Rotator.markdown

Pure Javascript Banner Rotator

Pure Javascript Banner Rotator. It's easy to use!

A Pen by Saminou yengue kizidi on CodePen.

License.

script.js

(function(){
	var bannerImg = document.querySelectorAll('#banner img'),
		btLeft = document.querySelector('#left'),
		btRight = document.querySelector('#right'),
		currentImg = 0;

	function initBanner () {
		resetBanner();

		bannerImg[0].style.display = 'block';
	}

	btLeft.addEventListener('click', function(){
		if (currentImg === 0) {
			currentImg = bannerImg.length;
		}

		toLeft();
	}, false);

	btRight.addEventListener('click', function(){
		if (currentImg === bannerImg.length - 1) {
			currentImg = -1;
		}

		toRight();
	}, false);

	function toLeft (operation) {
		resetBanner();
		bannerImg[currentImg - 1].style.display = 'block';
		currentImg--;
	}

	function toRight () {
		resetBanner();
		bannerImg[currentImg + 1].style.display = 'block';
		currentImg++;
	}

	function resetBanner () {
		for (var i = 0; i < bannerImg.length; i++) {
			bannerImg[i].style.display = 'none';
		}
	}

	initBanner();
})();

style.css

body {
  background: #cdcdcd;
}

.holder {
  width: 715px;
  margin: 50px auto;
}

.arrow {
  cursor: pointer;
  float: left;
  margin-top: 95px;
  width: 25px;
  height: 50px;
} 

#left {
  background: url(https://src.chromium.org/svn/trunk/src/ui/resources/default_200_percent/bubble_pointer_left.png) no-repeat;
}

#right {  
  background: url(https://src.chromium.org/svn/trunk/src/ui/resources/default_200_percent/bubble_pointer_right.png) no-repeat;
}

#banner {
  float: left;
}

a {
  color: #333;
  text-decoration: none;
  text-align: center;
  float:left;
  width: 100%;
  margin-top: 20px;
}