<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slider</title>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
</head>
<body>

<div class="slider">
	<div id="slide1"><span>slide#1</span></div>
	<div id="slide2"><span>slide#2</span></div>
	<div id="slide3"><span>slide#3</span></div>
</div>
<div class="points">
	<ul>
		<li class="active">&bull;</li>
		<li>&bull;</li>
		<li>&bull;</li>
	</ul>
</div>
<div class="arrow" id="next" data-dir="next">&raquo;</div>
<div class="arrow" id="prev" data-dir="prev">&laquo;</div>
</body>
</html>
html, body, section {
	padding: 0;
	margin: 0;
    min-height: 100% !important;
    height: 100%;
    font-size: 16px;
}

.slider{
	width: 300%;
	height: 100%;
	text-align: center;
	font-size: 9em;
	line-height: 500%;
	font-family: 'Oswald', sans-serif;
}
#slide1,#slide2,#slide3{
	width: 33.33333333333333%;
	height: 100%;
	float: left;
}
#slide1{
background-color: #00AFE9;
}
#slide2{
background-color: #f2f2f2;
}
#slide3{
background-color: #A8CB7C;
}
.points{
	position: fixed;
	display: block;
	top: 5px;
	right: 30px;
}
.points ul li{
	display: inline;
	font-size: 4em;
	padding-right: 0.3em;
}
.active{
	color: #777;
}
.arrow{
	position: absolute;
	z-index: 2000;
	font-size: 10em;
	top: 50%;
}
#next{
	right: 30px;
}
#prev{
	left: 30px;
}
#next:hover,#prev:hover{
	color: #777;
}
@media only screen and (max-width: 900px) {
	body{font-size: 14px;}
}
@media only screen and (max-width: 600px) {
	body{font-size: 10px;}
}
@media only screen and (max-width: 300px) {
	body{font-size: 8px;}
}
@media only screen and (max-height: 300px) {
	.arrow{display: none;}
}
$(document).ready(function(){
	
	function slider(slide,points,arrows,time){
		this.slide = slide;
		this.pointsWrap = points.find('ul');
		this.points = this.pointsWrap.find('li');
		this.count =this.slide.children().length;
		this.cur = 0;
		this.Time = time;
		this.nextCount = 0;
		this.prevCount = this.count-1;
		this.maxlength = this.count*100;
		this.arrows = arrows;
		this.interval = 0;

	};

	//active point reset 
	slider.prototype.pointSelect = function(e,obj){
		this.points.removeClass('active');
		this.points.eq(e).addClass('active');
	};
	
	//automatic slider

	slider.prototype.slideinterval=function(obj){
				this.cur = (this.cur + 1) % this.count;
				length = this.cur*100;
				slide = this.slide;

			slide.animate({'marginLeft':'-'+length+'%'});
			};
	
	//pointsclicking slide
	slider.prototype.pointclicked = function(obj,i){
			var cur = this.points.index(i),
				length = cur*100;
			// alert(cur);
			this.pointSelect(cur);
			this.slide.animate({'marginLeft':'-'+length+'%'});
	};
		
	//effect for the arrows slideing
	slider.prototype.slideEffect = function(e,count){
			var currentSlide = count*100;

		if(e==='next'){

				this.slide.animate({'marginLeft':'-'+currentSlide+'%'});
				this.pointSelect(count);

			};
		if(e==='prev'){

				this.slide.animate({'marginLeft':'-'+currentSlide+'%'});
				this.pointSelect(count);
		};	
	};
	//arrow clicking slide
	slider.prototype.arrowclicked = function(obj,e){
		this.nextCount+=1;
		var direction = $(e).data('dir'),
			max= this.count;
			// alert(direction);
			(this.nextCount<max)?this.nextCount:this.nextCount=0;
			(this.prevCount>-1)?this.prevCount:this.prevCount=max-1;

			(direction==='next')?this.slideEffect('next',this.nextCount):this.slideEffect('prev',this.prevCount);
		
		this.prevCount-=1;
	};

	//rendering all functions
	slider.prototype.render = function(){
		var obj = this,
			tm= obj.Time,
			clear = function(){clearInterval(obj.interval)};
			inter = function(){
						obj.slideinterval(obj);
						obj.pointSelect(obj.cur);
			};
	obj.interval= setInterval(function(){inter()},tm);

	obj.points.on('click',function(){
		index = this;
		obj.pointclicked(obj,index);
		clear();
		obj.interval= setInterval(function(){inter()},tm);
		
	});
	obj.arrows.on('click',function(){
		obj.arrowclicked(obj,this);
		clear();
		obj.interval= setInterval(function(){inter()},tm);
		
	});
	};
	/*
	******************************
	*=object end
	******************************
	*/

	$('.slider').css('overflow','hidden');
	$('body').css('overflow','hidden');

	var carousel = new slider($('.slider'),$('.points'),$('.arrow'),2000);
		carousel.render();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.