simple slider

by Md. Atiquzzaman Soikat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1>Incredibly Basic Slider</h1>
	<div id="slider-1" class="slider">
	  <a href="#" class="control_next"> > </a>
	  <a href="#" class="control_prev"> < </a>
	  <ul id="slide-list">
		<li style="background: pink;">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
		</li>
		<li id="image-item" style="background: blue;">
			<img src="get-the-look-rc.jpg">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	

	html {
	  border-top: 5px solid #fff;
	  background: #58DDAF;
	  color: #2a2a2a;
	}

	html, body {
	  margin: 0;
	  padding: 0;
	  font-family: 'Open Sans';
	}

	h1 {
	  color: #fff;
	  text-align: center;
	  font-weight: 300;
	}

	.slider {
	  position: relative;
	  overflow: hidden;
	  margin: 20px auto 0 auto;
	  border-radius: 4px;
	  width: 100%;
	}

	.slider ul {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  height: auto;
	  list-style: none;
	  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	  display: -ms-flexbox;  /* TWEENER - IE 10 */
	  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	  display: flex;  
	}

	.slider ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
      width: 100%;
	  height: auto;
	  background: #ccc;
	  text-align: center;
	}

	a.control_prev, a.control_next {
	  position: absolute;
	  top: 40%;
	  z-index: 999;
	  display: block;
	  padding: 4% 3%;
	  width: auto;
	  height: auto;
	  background: #2a2a2a;
	  color: #fff;
	  text-decoration: none;
	  font-weight: 600;
	  font-size: 18px;
	  opacity: 0.8;
	  cursor: pointer;
	}

	a.control_prev:hover, a.control_next:hover {
	  opacity: 1;
	  -webkit-transition: all 0.2s ease;
	}

	a.control_prev {
	  border-radius: 0 2px 2px 0;
	}

	a.control_next {
	  right: 0;
	  border-radius: 2px 0 0 2px;
	}

	.slider_option {
	  position: relative;
	  margin: 10px auto;
	  width: 160px;
	  font-size: 18px;
	}

JavaScript

function startSlider(justLoaded, item){
	var slideCount = $('#' + item + ' ul li').length;
	var slidePercent = (slideCount * 100) + "%";
	$('#' + item + ' ul').css({ width: slidePercent});
	var percentWidth = (100/slideCount)+"%";
	$('#' + item + ' ul li').css({width: percentWidth});
	var indvSlideWidth = $('#' + item + ' ul li').width();
	var percentHolder = "-100%";
	$('#' + item + ' ul').css({ marginLeft: percentHolder });
	if (justLoaded){
		$('#' + item + ' ul li:last-child').prependTo('#' + item + ' ul');
	}
	return indvSlideWidth;
}
function moveLeft(slideWidthPx, item) {
	$('#' + item + ' ul').animate({
		left: + slideWidthPx
	}, 200, function () {
		$('#' + item + ' ul li:last-child').prependTo('#' + item + ' ul');
		$('#' + item + ' ul').css('left', '');
	});
};

function moveRight(slideWidthPx, item) {
	$('#' + item + ' ul').animate({
		left: - slideWidthPx
	}, 300, function () {
		
		$('#' + item + ' ul li:first-child').appendTo('#' + item + ' ul');
		$('#' + item + ' ul').css('left', '');
	});
};
jQuery(document).ready(function () {
	$( ".slider" ).each(function() {
		//1)
		var slideWidthPx = startSlider(true, this.id);
		var item = this.id;
		//2)
		$prevBtn = $('#' + this.id + ' a.control_prev');
		$prevBtn.bind('click', { id: this.id }, function(event) {
			var data = event.data;
			moveLeft(slideWidthPx, data.id);
		});
		
		$nextBtn = $('#' + this.id + ' a.control_next');
		$nextBtn.bind('click', { id: this.id }, function(event) {
			var data = event.data;
			moveRight(slideWidthPx, data.id);
		});
		var $timer = setInterval(function(){ moveRight(slideWidthPx, item) }, 3000);
		$('#' + item).hover(function() {  
		console.log("you have hovered" + '#' + item);
		clearInterval($timer);
    console.log($timer);
		},
		function() {
			$timer = setInterval(function(){ moveRight(slideWidthPx, item) }, 3000);
			console.log("interval reapplied to" + item);
		});
	})
});