<div class="container">
<h1>As-slider</h1>
<section class="my-slider">
<ul>
<li>
<section class="slide_1">
<div class="caption">
<h2 style="text-align:center;">This is a very basic and simple slider</h2>
<p>Most of the style is set in CSS and <strong>not</strong> in the JavaScript as most of the other sliders.</p>
</div>
</section>
</li>
<li>
<section class="slide_2">
<div class="caption">
<h2>It contains</h2>
<ul>
<li>Slider area</li>
<li>Navigation buttons</li>
<li>Progress bar</li>
<li>Markers</li>
</ul>
<p>Nothing more, nothing less...</p>
</div>
</section>
</li>
<li>
<section class="slide_3">
<div class="caption">
<h2>It's...</h2>
<ul>
<li>Stabile</li>
<li>Easy to customize</li>
<li>Responsive</li>
<li>Hardware accelerated</li>
</ul>
</div>
</section>
</li>
</ul>
</section>
</div>
<div class="scroll-test">
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
<p>Scroll test...</p>
</div>
/*
* Visual styles for demo
* */
body {
/*background:#191e24;*/
background: #333;
color:#eee;
font-family:arial, sans-serif;
}
.container {
position: relative;
width:95%;
max-width: 960px;
margin: 0 auto;
}
.scroll-test p {
border-top:1px solid rgba(0,0,0,.1);
color:#444;
}
.slide_1,
.slide_2,
.slide_3 {
color:white;
height:400px;
}
.slide_1 {
background: url('http://lorempixel.com/600/400/nature/2/') no-repeat center center;
background-size: 100% auto;
}
.slide_2 {
background: url('http://lorempixel.com/600/400/nature/4/') no-repeat center center;
background-size: 100% auto;
}
.slide_3 {
background: url('http://lorempixel.com/600/400/nature/6/') no-repeat center center;
background-size: 100% auto;
}
/*
* Slider styles
* */
.csstransforms .as-wrap { transition: opacity 1s ease-out; }
.as-wrap {
display:none;
opacity: 0;
position: relative;
overflow: hidden;
width: 100%;
}
.as-wrap.loaded {opacity: 1;}
.as-wrap .as-view {
position: relative;
width:100%;
overflow: hidden;
height:400px;
}
.as-wrap .as-view .as-slider {
position: absolute;
list-style: none;
margin:0; padding:0;
}
.csstransforms .as-wrap .as-view .as-slider { transition: left 1s ease-in-out; }
.csstransforms .as-wrap .as-view .as-slider.no-transition { transition: none; }
.as-wrap .as-view .as-slider .as-item {
position: relative;
overflow: hidden;
margin:0; padding:0;
float: left;
}
/* Progress bar */
.as-wrap .as-progress {
position: relative;
width: 100%;
min-height:5px;
margin-top:-5px;
background: transparent;
overflow: hidden;
z-index:2;
}
.as-wrap .as-progress-value {
position: absolute;
top:0;
left:0;
min-height: 5px;
min-width: 0;
width:0;
max-width: 100%;
background: lime;
}
/* Navigation */
.csstransforms .as-wrap .as-nav a { transition: opacity .4s ease-out; }
.as-wrap .as-nav a {
opacity: 0;
position: absolute;
top:0;
height:100%;
width:50px;
text-align:center;
color:white;
z-index:2;
}
.as-wrap .as-nav .dir-prev { left:0; }
.as-wrap .as-nav .dir-next { right:0; }
.as-wrap .as-nav a:hover {
color:#000;
opacity: 1;
}
.as-wrap.hovering-marker .as-nav a { opacity: 1; }
.as-wrap .as-nav a span {
position: absolute;
top:50%;
left:0;
margin-top:-40px;
display:block;
height:80px;
width: 50px;
background:lime;
font-size:2em;
line-height: 80px;
}
/* Marker */
.as-wrap .as-markers {
list-style: none;
text-align: center;
padding:0; margin:0;
}
.as-wrap .as-markers .as-mark {
display:inline-block;
margin:10px 5px 0 5px;
}
.as-wrap .as-markers .as-mark a {
display:block;
text-decoration: none;
color:#ccc;
}
.as-wrap .as-markers .as-mark a:hover,
.as-wrap .as-markers .as-mark.active a { color:lime; }
.as-wrap .as-markers .as-mark a span {
display:block;
width: 10px;
height:10px;
font-size:40px;
line-height: 10px;
}
/* Caption */
.as-wrap .as-item .caption {
position: absolute;
top:0;
left:0;
height: 100%;
width:40%;
background: #000;
z-index:2;
padding:0 20px 0 60px;
box-sizing: border-box;
}
.rgba .as-wrap .as-item .caption { background:rgba(0,0,0,.5); }
@media (max-width: 767px) {
/* Demo style */
body {padding:0; margin:0;}
.slide_1, .slide_2, .slide_3 {background-size: auto 100%;}
.container {width:100%}
/* *** */
.as-wrap .as-view { height: 250px; }
.as-wrap .as-view .as-slider .as-item .caption { width:100%; }
.touch .as-wrap .as-nav { display:none;}
.as-wrap .as-item .caption {padding:1em;}
}
(function ($) {
$.fn.as = function (o) {
var defaults = {
animation_duration: 700,
animation_interval: 8000,
touch_draglimit: 80
};
// states
var state = {
slide_length: 0,
slide_current: 1,
slide_next: 0,
index_current: 1,
index_next: 0,
interval: null,
paused: false,
resizing: false,
doTransition: false,
clickEvent: "click"
};
if (Modernizr) {
Modernizr.csstransitions ? doTransition = true : doTransition = false;
Modernizr.touch ? clickEvent = "touchstart" : clickEvent = "click";
}
var settings = $.extend({}, defaults, o);
// create namespace
var slider = {};
// set reference to slider element
var el = this;
// the clones
var clone_first,
clone_last;
// responsive stuff
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
sliderWidth = el.width();
/*
* Internal functions
* * */
// initiate slider
var init = function () {
setup();
//update_proportions();
start_slider();
update_proportions();
i_interact();
};
var setup = function () {
// wrap the slider
el.wrap('<div class="as-wrap"><div class="as-view"></div></div>');
// set namespace
slider.view = el.parent();
slider.wrap = slider.view.parent();
// mark slider list
slider.slider = $("> ul", el);
slider.slider.addClass("as-slider").attr("data-current-slide", state.slide_current).attr("data-current-index", state.index_current);
state.slide_length = slider.slider.children("li").length;
// add progress bar
slider.wrap.append('<div class="as-progress"><div class="as-progress-value"></div></div>');
slider.progress = slider.wrap.find(".as-progress-value");
// add marker
slider.wrap.append('<ol class="as-markers"/>');
$.each(slider.slider.children("li"), function (key, slide) {
var slide_num = key + 1,
goToSlide = key + 1,
marker = $('<li class="as-mark"><a href="#" data-slide="' + slide_num + '"><span>•</span></a></li>');
goToSlide = key + 2;
if (slide_num === state.slide_current) marker.addClass("active");
// bind click
marker.on(clickEvent, "a", function (e) {
e.preventDefault();
progress_reset();
state.paused = false;
if (state.slide_current !== goToSlide) doSlide(false, goToSlide);
});
marker.appendTo($(".as-markers", slider.wrap));
});
slider.markers = $(".as-markers > li", slider.wrap);
// We need to clone the first and last slide to get a better slide effect.
clone_first = $("> li", slider.slider).eq(0).clone();
clone_last = $("> li", slider.slider).eq(state.slide_length - 1).clone();
clone_first.attr({
"data-clone": "last",
"data-slide": 0
}).appendTo(slider.slider);
clone_last.attr({
"data-clone": "first",
"data-slide": 0
}).prependTo(slider.slider);
slider.item = slider.slider.children("li");
slider.item.addClass("as-item");
// update slider length
state.slide_length = slider.item.length;
// add navigation
slider.wrap.append('<div class="as-nav"><a href="#" class="dir-prev" data-dir="prev"><span><span></span></span></a><a href="#" class="dir-next" data-dir="next"><span><span></span></span></a></div>');
// set namepace for navigation
slider.nav = slider.wrap.find(".as-nav");
slider.nav_prev = slider.nav.find(".dir-prev");
slider.nav_next = slider.nav.find(".dir-next");
};
var start_slider = function () {
slider.slider.addClass("no-transition");
progress_start();
// slider is now loaded!
slider.wrap.show(0, function () {
slider.wrap.addClass("loaded");
slider.slider.removeClass("no-transition");
});
};
/* RESIZE
We dont want to spam the resize trigger,
this waits unitl the resize is stopped,
wait 200 ms and then trigger what to do
*/
var resizeTimer = 0;
var resizeWindow = function () {
var windowWidthNew = $(window).width(),
windowHeightNew = $(window).height(),
sliderWidthNew = el.width();
if (windowWidth !== windowWidthNew || windowHeight !== windowHeightNew) {
// set new dimentions
windowWidth = windowWidthNew;
windowHeight = windowHeightNew;
sliderWidth = sliderWidthNew;
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(resizeStop, 50);
resizeStart();
}
};
var resizeStart = function () {
state.paused = true;
state.resizing = true;
if (state.resizing) {
slider.progress.stop();
slider.slider.addClass("no-transition");
}
};
var resizeStop = function () {
update_proportions();
if (state.resizing) {
state.resizing = false;
state.paused = false;
progress_reset();
//doSlide(false, state.slide_current)
slider.slider.removeClass("no-transition");
}
};
/* // RESIZE */
var progress_reset = function () {
slider.progress.stop().css("width", "0%");
progress_stop();
};
var progress_stop = function () {
if (!state.paused) {
clearInterval(state.interval);
progress_start();
} else {
setTimeout(function () {
if (!state.paused) {
clearInterval(state.interval);
progress_start();
}
}, settings.animation_duration);
}
};
var progress_start = function () {
slider.progress.animate({
"width": "100%"
}, settings.animation_interval);
state.interval = setInterval(function () {
doSlide("next", false);
}, settings.animation_interval);
};
var update_proportions = function () {
sliderWidth = slider.wrap.width();
// set slider width
slider.slider.css({
"width": sliderWidth * (state.slide_length),
"left": -sliderWidth * state.slide_current
});
// set slide width
$(".as-item").css({
"width": sliderWidth
});
};
var i_interact = function () {
// Bind resize
$(window).bind("resize", resizeWindow);
// Hover wrap
slider.wrap
.on("mouseenter", function () {
if (!state.paused) {
state.paused = true;
slider.wrap.addClass("hovering");
clearInterval(state.interval);
slider.progress.stop();
}
})
.on("mouseleave", function () {
if (state.paused) {
progress_reset();
slider.wrap.removeClass("hovering");
state.paused = false;
}
});
// Hover markers
slider.markers.parent()
.on("mouseenter", function () {
slider.wrap.addClass("hovering-marker");
})
.on("mouseleave", function () {
slider.wrap.removeClass("hovering-marker");
});
// Clicks
slider.nav_prev.on(clickEvent, function (e) {
e.preventDefault();
slider.progress.stop();
state.paused = false;
doSlide("prev", false);
});
slider.nav_next.on(clickEvent, function (e) {
e.preventDefault();
slider.progress.stop();
state.paused = false;
doSlide("next", false);
});
$(".as-stop", slider.wrap).on(clickEvent, function (e) {
e.preventDefault();
slider.progress.stop();
clearInterval(state.interval);
});
initTouch();
// bind pause and stop btn
$(document).keydown(function (e) {
// bind space key
if (e.keyCode === 32) {
if (slider.wrap.hasClass("stopped")) {
slider.wrap.removeClass("stopped");
progress_reset();
} else {
slider.wrap.addClass("stopped");
clearInterval(state.interval);
slider.progress.stop();
}
return false;
}
});
};
/* Event handlers for touch
* * */
// INIT
var initTouch = function () {
// initiate object to contain all touch values
slider.touch = {
start: { x: 0, y: 0 },
end: { x: 0, y: 0 }
}
slider.view.bind("touchstart", onTouchStart);
};
// TOUCH START
var onTouchStart = function (e) {
console.log("%cf: onTouchStart()", "color:#888; font-style:italic;");
if (!state.paused) {
state.paused = true;
// record orginal pos when touch start
slider.touch.originalPos = el.position();
var orig = e.originalEvent;
// record x, y coordinates when start touch
slider.touch.start.x = orig.changedTouches[0].pageX;
slider.touch.start.y = orig.changedTouches[0].pageY;
// bind "touchmove" on viewport
slider.view.bind("touchmove", onTouchMove);
// bind "touchend" on viewport
slider.view.bind("touchend", onTouchEnd);
}
};
// TOUCH MOVE
var onTouchMove = function (e) {
var orig = e.originalEvent;
// if scrolling on y axis, do not prevent default
var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
// x axis swipe
if ((xMovement * 3) > yMovement) {
e.preventDefault();
console.log("Swipe horizontal");
}
var value = 0;
var change = orig.changedTouches[0].pageX - slider.touch.start.x;
console.log("Value: " + value + "\n" + "Change: " + change);
value = slider.touch.originalPos.left + change;
};
// TOUCH END
var onTouchEnd = function (e) {
console.log("%cf: onTouchEnd()", "color:#888; font-style:italic;");
slider.view.unbind("touchmove", onTouchMove);
state.paused = false;
var orig = e.originalEvent;
var value = 0;
// record end x, y pos
slider.touch.end.x = orig.changedTouches[0].pageX;
slider.touch.end.y = orig.changedTouches[0].pageY;
var distanceX = 0,
distanceY = 0;
distanceX = slider.touch.end.x - slider.touch.start.x;
distanceY = slider.touch.end.y - slider.touch.start.y;
value = slider.touch.originalPos.left;
// check distance
if (Math.abs(distanceX) >= settings.touch_draglimit) {
distanceX < 0 ? doSlide("next", false) : doSlide("prev", false);
}
slider.view.unbind("touchend", onTouchEnd);
};
var doSlide = function (dir, pos) {
if (!state.paused) {
state.paused = true;
if (pos) {
state.slide_next = pos;
state.index_next = pos - 1;
} else {
slide_next(dir);
}
// update marker position
var marker_index = state.index_next - 1;
if (marker_index === state.slide_length - 2) {
marker_index = 0;
} else if (marker_index === -1) {
marker_index = state.slide_length - 3;
}
slider.markers.removeClass("active").eq(marker_index).addClass("active");
// is modern browser?
if (doTransition) {
slider.slider.css({
"left": -state.index_next * sliderWidth
});
setTimeout(function () {
slide_move();
}, settings.animation_duration * 1.5);
slider.slider.removeClass("no-transition");
} else {
slider.slider.stop(false, false).animate({
"left": -state.index_next * sliderWidth
}, settings.animation_duration, function () {
slide_move();
});
}
}
state.paused = false;
};
var slide_move = function () {
state.slide_current = state.slide_next;
state.index_current = state.index_next;
// check if last or first clone
if (slider.item.eq(state.index_current).attr("data-clone") === "last") {
slider.slider.addClass("no-transition");
slider.slider.css({
"left": -sliderWidth
});
state.slide_current = 2;
state.index_current = 1;
} else if (slider.item.eq(state.index_current).attr("data-clone") === "first") {
slider.slider.addClass("no-transition");
slider.slider.css({
"left": -sliderWidth * (state.slide_length - 2)
});
state.slide_current = state.slide_length - 1;
state.index_current = state.slide_length - 2;
}
progress_reset();
state.paused = false;
slider.slider.attr("data-current-slide", state.slide_current).attr("data-current-index", state.index_current);
};
var slide_next = function (dir) {
if (dir === "next") {
if (slider.item.eq(state.index_current).next().length) {
state.index_next = state.index_current + 1;
state.slide_next = state.slide_current + 1;
} else {
state.index_next = 0;
state.slide_next = 1;
}
} else {
if (slider.item.eq(state.index_current).prev().length) {
state.index_next = state.index_current - 1;
state.slide_next = state.slide_current - 1;
} else {
state.index_next = state.slide_length - 1;
state.slide_next = state.slide_length;
}
}
};
init();
};
})(jQuery);
$(".my-slider").as();
This Pen doesn't use any external CSS resources.