<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">•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
<div class="arrow" id="next" data-dir="next">»</div>
<div class="arrow" id="prev" data-dir="prev">«</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.