Skip to content

Instantly share code, notes, and snippets.

@elrumordelaluz

elrumordelaluz/index.html

Created December 15, 2014 23:41
Show Gist options
  • Save elrumordelaluz/5cc382915fec12d3cb4e to your computer and use it in GitHub Desktop.
Save elrumordelaluz/5cc382915fec12d3cb4e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.pe-slider-wrapper {
width: 100%;
position: relative;
z-index: 1;
transform: translateZ(0);
backface-visibility: hidden;
}
.pe-slider {
position: relative;
z-index: 1;
overflow: hidden;
}
.pe-slider li {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
transform: translateX(100%);
transition: transform .3s;
}
.pe-slider li.selected {
position: relative;
z-index: 2;
transform: translateX(0);
}
.pe-slider li.left {
transform: translateX(-100%);
}
.pe-slider li img {
display: block;
width: 100%;
}
.pe-slider li video {
width: 100% !important;
}
.pe-slider-nav li {
position: absolute;
z-index: 2;
top: 50%;
bottom: auto;
}
.pe-slider-nav li a {
display: block;
width: 48px;
height: 48px;
overflow: hidden;
border-top: 1px solid #c6baba;
border-right: 1px solid #c6baba;
transition: opacity .3s;
transform: rotate(45deg);
}
.pe-slider-nav li a.inactive {
opacity: 0;
visibility: hidden;
}
.pe-slider-nav li:first-child {
left: 30px;
}
.pe-slider-nav li:first-child a {
transform: rotate(-135deg);
}
.pe-slider-nav li:last-child {
right: 30px;
}
.pe-slider-pag {
position: absolute;
z-index: 2;
bottom: 30px;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.pe-slider-pag li {
display: inline-block;
float: left;
margin: 0 5px;
}
.pe-slider-pag li.selected a {
background-color: #c6baba;
}
.pe-slider-pag a {
display: block;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid #c6baba;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="pe-slider-wrapper">
<ul class="pe-slider">
<li class="selected">
<img src="http://lorempixel.com/400/200/sports/1/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/400/200/sports/2/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/400/200/sports/3/" alt="" />
</li>
</ul><!-- /.pe-slider -->
<ul class="pe-slider-nav">
<li><a href="#0" class="pe-slider-prev inactive"></a></li>
<li><a href="#0" class="pe-slider-next"></a></li>
</ul><!-- /.pe-slider-nav -->
</div><!-- /.pe-slider-wrapper -->
<script id="jsbin-javascript">
var slider = (function(){
// Helper functions
function noDot(str){
var nStr, re = /\./;
if(re.test(str)){
nStr = str.replace('.','');
}
return nStr;
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
// Variables
var wrapper,
slides,
slidesList,
prev,
next,
sliderPagination;
var options = {
classes : {
wrapper: '.pe-slider-wrapper',
slider: '.pe-slider',
pagination: '.pe-slider-pag',
prev: '.pe-slider-prev',
next: '.pe-slider-next',
selected: '.selected',
hidden: '.left',
inactive: '.inactive'
}
};
// Core functions
function update(){
publicAPI.opt = options;
}
function initialize(){
wrapper = document.querySelector(options.classes.wrapper);
slides = document.querySelectorAll(options.classes.slider + ' li');
slidesList = [].slice.call(slides);
prev = document.querySelector(options.classes.prev);
next = document.querySelector(options.classes.next);
sliderPagination = _pagination(slides);
_initEvents();
}
function _initEvents(){
next.addEventListener('click', function(){
_nextSlide();
});
prev.addEventListener('click', function(){
_prevSlide();
});
function paginationAction(){
var selectedDot = this;
if(!hasClass(selectedDot,noDot(options.classes.selected))){
var dotList = [].slice.call(this.parentNode.children);
var selectedPosition = dotList.indexOf(this);
var activePosition = slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected));
if (activePosition < selectedPosition){
_nextSlide(selectedPosition);
} else {
_prevSlide(selectedPosition);
}
}
} // paginationAction
for (var i = 0; i < sliderPagination.length; i++){
sliderPagination[i].addEventListener('click', paginationAction, false);
}
document.addEventListener('keyup',function(e){
if( (e.which == '37' ) && (slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected)) !== 0) ){
_prevSlide();
} else if ( (e.which == '39' ) && (slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected)) !== (slides.length - 1) )) {
_nextSlide();
}
});
} // _initEvents
function _pagination(s){
var ul = document.createElement('ul');
ul.setAttribute('class', noDot(options.classes.pagination));
wrapper.appendChild(ul);
[].slice.call(s).forEach(function(elem, index){
var dotContainer = document.createElement('li');
if(index === 0){
dotContainer.setAttribute('class',noDot(options.classes.selected));
}
var dot = document.createElement('a');
dot.setAttribute('href','#0');
dot.innerHTML = index + 1;
dotContainer.appendChild(dot);
ul.appendChild(dotContainer);
});
return ul.querySelectorAll('li');
} // _pagination
function _nextSlide(s) {
var n,
sel = noDot(options.classes.selected),
activeSlide = document.querySelector(options.classes.slider + ' ' + options.classes.selected),
activeDot = document.querySelector(options.classes.pagination + ' ' + options.classes.selected);
if(s === undefined){
n = slidesList.indexOf(activeSlide) + 1;
} else {
n = s;
}
activeSlide.classList.remove(sel);
slides[n].classList.add(sel);
slidesList.forEach(function(item, index){
if(index < n){
slides[index].classList.add(noDot(options.classes.hidden));
}
});
activeDot.classList.remove(sel);
sliderPagination[n].classList.add(sel);
_updateNavigation(slides[n]);
} // _nextSlide
function _prevSlide(s){
var n,
sel = noDot(options.classes.selected),
activeSlide = document.querySelector(options.classes.slider + ' ' + options.classes.selected),
activeDot = document.querySelector(options.classes.pagination + ' ' + options.classes.selected);
if(s === undefined){
n = slidesList.indexOf(activeSlide) - 1;
} else {
n = s;
}
activeSlide.classList.remove(sel);
slides[n].classList.add(sel);
slides[n].classList.remove(noDot(options.classes.hidden));
slidesList.forEach(function(item, index){
if(index > n){
slides[index].classList.remove(noDot(options.classes.hidden));
}
});
activeDot.classList.remove(sel);
sliderPagination[n].classList.add(sel);
_updateNavigation(slides[n]);
}
function _updateNavigation(active){
var inactive = noDot(options.classes.inactive);
if(slidesList.indexOf(active) === 0){
prev.classList.add(inactive);
} else {
prev.classList.remove(inactive);
}
if(slidesList.indexOf(active) === slides.length - 1){
next.classList.add(inactive);
} else {
next.classList.remove(inactive);
}
} // _updateNavigation
// Public API
var publicAPI = {
init: initialize,
opt: options,
update: update
};
return publicAPI;
})();
slider.init();
</script>
<script id="jsbin-source-css" type="text/css">body, ul {
margin: 0;
padding: 0;
}
ul { list-style:none; }
.pe-slider-wrapper {
width: 100%;
position: relative;
z-index: 1;
transform: translateZ(0);
backface-visibility: hidden;
}
.pe-slider {
position: relative;
z-index: 1;
overflow: hidden;
li {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
transform: translateX(100%);
transition: transform .3s;
&.selected {
position: relative;
z-index: 2;
transform: translateX(0);
}
&.left {
transform: translateX(-100%);
}
img {
display: block;
width: 100%;
}
video {
width: 100% !important;
// height: auto !important;
}
}
}
.pe-slider-nav{
li {
position: absolute;
z-index: 2;
top: 50%;
bottom: auto;
a {
display: block;
width: 48px;
height: 48px;
overflow: hidden;
border-top:1px solid #c6baba;
border-right:1px solid #c6baba;
transition: opacity .3s;
transform: rotate(45deg);
&.inactive {
opacity: 0;
visibility: hidden;
}
}
&:first-child {
left: 30px;
a { transform: rotate(-135deg); }
}
&:last-child { right: 30px; }
}
}
.pe-slider-pag {
position: absolute;
z-index: 2;
bottom:30px;
left: 50%;
right: auto;
transform:translateX(-50%);
li {
display: inline-block;
float: left;
margin: 0 5px;
&.selected a { background-color: #c6baba; }
}
a {
display: block;
width: 11px;
height: 11px;
border-radius: 50%;
border:2px solid #c6baba;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var slider = (function(){
// Helper functions
function noDot(str){
var nStr, re = /\./;
if(re.test(str)){
nStr = str.replace('.','');
}
return nStr;
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
// Variables
var wrapper,
slides,
slidesList,
prev,
next,
sliderPagination;
var options = {
classes : {
wrapper: '.pe-slider-wrapper',
slider: '.pe-slider',
pagination: '.pe-slider-pag',
prev: '.pe-slider-prev',
next: '.pe-slider-next',
selected: '.selected',
hidden: '.left',
inactive: '.inactive'
}
};
// Core functions
function update(){
publicAPI.opt = options;
}
function initialize(){
wrapper = document.querySelector(options.classes.wrapper);
slides = document.querySelectorAll(options.classes.slider + ' li');
slidesList = [].slice.call(slides);
prev = document.querySelector(options.classes.prev);
next = document.querySelector(options.classes.next);
sliderPagination = _pagination(slides);
_initEvents();
}
function _initEvents(){
next.addEventListener('click', function(){
_nextSlide();
});
prev.addEventListener('click', function(){
_prevSlide();
});
function paginationAction(){
var selectedDot = this;
if(!hasClass(selectedDot,noDot(options.classes.selected))){
var dotList = [].slice.call(this.parentNode.children);
var selectedPosition = dotList.indexOf(this);
var activePosition = slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected));
if (activePosition < selectedPosition){
_nextSlide(selectedPosition);
} else {
_prevSlide(selectedPosition);
}
}
} // paginationAction
for (var i = 0; i < sliderPagination.length; i++){
sliderPagination[i].addEventListener('click', paginationAction, false);
}
document.addEventListener('keyup',function(e){
if( (e.which == '37' ) && (slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected)) !== 0) ){
_prevSlide();
} else if ( (e.which == '39' ) && (slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected)) !== (slides.length - 1) )) {
_nextSlide();
}
});
} // _initEvents
function _pagination(s){
var ul = document.createElement('ul');
ul.setAttribute('class', noDot(options.classes.pagination));
wrapper.appendChild(ul);
[].slice.call(s).forEach(function(elem, index){
var dotContainer = document.createElement('li');
if(index === 0){
dotContainer.setAttribute('class',noDot(options.classes.selected));
}
var dot = document.createElement('a');
dot.setAttribute('href','#0');
dot.innerHTML = index + 1;
dotContainer.appendChild(dot);
ul.appendChild(dotContainer);
});
return ul.querySelectorAll('li');
} // _pagination
function _nextSlide(s) {
var n,
sel = noDot(options.classes.selected),
activeSlide = document.querySelector(options.classes.slider + ' ' + options.classes.selected),
activeDot = document.querySelector(options.classes.pagination + ' ' + options.classes.selected);
if(s === undefined){
n = slidesList.indexOf(activeSlide) + 1;
} else {
n = s;
}
activeSlide.classList.remove(sel);
slides[n].classList.add(sel);
slidesList.forEach(function(item, index){
if(index < n){
slides[index].classList.add(noDot(options.classes.hidden));
}
});
activeDot.classList.remove(sel);
sliderPagination[n].classList.add(sel);
_updateNavigation(slides[n]);
} // _nextSlide
function _prevSlide(s){
var n,
sel = noDot(options.classes.selected),
activeSlide = document.querySelector(options.classes.slider + ' ' + options.classes.selected),
activeDot = document.querySelector(options.classes.pagination + ' ' + options.classes.selected);
if(s === undefined){
n = slidesList.indexOf(activeSlide) - 1;
} else {
n = s;
}
activeSlide.classList.remove(sel);
slides[n].classList.add(sel);
slides[n].classList.remove(noDot(options.classes.hidden));
slidesList.forEach(function(item, index){
if(index > n){
slides[index].classList.remove(noDot(options.classes.hidden));
}
});
activeDot.classList.remove(sel);
sliderPagination[n].classList.add(sel);
_updateNavigation(slides[n]);
}
function _updateNavigation(active){
var inactive = noDot(options.classes.inactive);
if(slidesList.indexOf(active) === 0){
prev.classList.add(inactive);
} else {
prev.classList.remove(inactive);
}
if(slidesList.indexOf(active) === slides.length - 1){
next.classList.add(inactive);
} else {
next.classList.remove(inactive);
}
} // _updateNavigation
// Public API
var publicAPI = {
init: initialize,
opt: options,
update: update
};
return publicAPI;
})();
slider.init();
</script></body>
</html>
Raw
jsbin.rihigugile.css
body, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.pe-slider-wrapper {
width: 100%;
position: relative;
z-index: 1;
transform: translateZ(0);
backface-visibility: hidden;
}
.pe-slider {
position: relative;
z-index: 1;
overflow: hidden;
}
.pe-slider li {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
transform: translateX(100%);
transition: transform .3s;
}
.pe-slider li.selected {
position: relative;
z-index: 2;
transform: translateX(0);
}
.pe-slider li.left {
transform: translateX(-100%);
}
.pe-slider li img {
display: block;
width: 100%;
}
.pe-slider li video {
width: 100% !important;
}
.pe-slider-nav li {
position: absolute;
z-index: 2;
top: 50%;
bottom: auto;
}
.pe-slider-nav li a {
display: block;
width: 48px;
height: 48px;
overflow: hidden;
border-top: 1px solid #c6baba;
border-right: 1px solid #c6baba;
transition: opacity .3s;
transform: rotate(45deg);
}
.pe-slider-nav li a.inactive {
opacity: 0;
visibility: hidden;
}
.pe-slider-nav li:first-child {
left: 30px;
}
.pe-slider-nav li:first-child a {
transform: rotate(-135deg);
}
.pe-slider-nav li:last-child {
right: 30px;
}
.pe-slider-pag {
position: absolute;
z-index: 2;
bottom: 30px;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.pe-slider-pag li {
display: inline-block;
float: left;
margin: 0 5px;
}
.pe-slider-pag li.selected a {
background-color: #c6baba;
}
.pe-slider-pag a {
display: block;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid #c6baba;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
Raw
jsbin.rihigugile.js
var slider = (function(){
// Helper functions
function noDot(str){
var nStr, re = /\./;
if(re.test(str)){
nStr = str.replace('.','');
}
return nStr;
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
// Variables
var wrapper,
slides,
slidesList,
prev,
next,
sliderPagination;
var options = {
classes : {
wrapper: '.pe-slider-wrapper',
slider: '.pe-slider',
pagination: '.pe-slider-pag',
prev: '.pe-slider-prev',
next: '.pe-slider-next',
selected: '.selected',
hidden: '.left',
inactive: '.inactive'
}
};
// Core functions
function update(){
publicAPI.opt = options;
}
function initialize(){
wrapper = document.querySelector(options.classes.wrapper);
slides = document.querySelectorAll(options.classes.slider + ' li');
slidesList = [].slice.call(slides);
prev = document.querySelector(options.classes.prev);
next = document.querySelector(options.classes.next);
sliderPagination = _pagination(slides);
_initEvents();
}
function _initEvents(){
next.addEventListener('click', function(){
_nextSlide();
});
prev.addEventListener('click', function(){
_prevSlide();
});
function paginationAction(){
var selectedDot = this;
if(!hasClass(selectedDot,noDot(options.classes.selected))){
var dotList = [].slice.call(this.parentNode.children);
var selectedPosition = dotList.indexOf(this);
var activePosition = slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected));
if (activePosition < selectedPosition){
_nextSlide(selectedPosition);
} else {
_prevSlide(selectedPosition);
}
}
} // paginationAction
for (var i = 0; i < sliderPagination.length; i++){
sliderPagination[i].addEventListener('click', paginationAction, false);
}
document.addEventListener('keyup',function(e){
if( (e.which == '37' ) && (slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected)) !== 0) ){
_prevSlide();
} else if ( (e.which == '39' ) && (slidesList.indexOf(document.querySelector(options.classes.slider + ' ' + options.classes.selected)) !== (slides.length - 1) )) {
_nextSlide();
}
});
} // _initEvents
function _pagination(s){
var ul = document.createElement('ul');
ul.setAttribute('class', noDot(options.classes.pagination));
wrapper.appendChild(ul);
[].slice.call(s).forEach(function(elem, index){
var dotContainer = document.createElement('li');
if(index === 0){
dotContainer.setAttribute('class',noDot(options.classes.selected));
}
var dot = document.createElement('a');
dot.setAttribute('href','#0');
dot.innerHTML = index + 1;
dotContainer.appendChild(dot);
ul.appendChild(dotContainer);
});
return ul.querySelectorAll('li');
} // _pagination
function _nextSlide(s) {
var n,
sel = noDot(options.classes.selected),
activeSlide = document.querySelector(options.classes.slider + ' ' + options.classes.selected),
activeDot = document.querySelector(options.classes.pagination + ' ' + options.classes.selected);
if(s === undefined){
n = slidesList.indexOf(activeSlide) + 1;
} else {
n = s;
}
activeSlide.classList.remove(sel);
slides[n].classList.add(sel);
slidesList.forEach(function(item, index){
if(index < n){
slides[index].classList.add(noDot(options.classes.hidden));
}
});
activeDot.classList.remove(sel);
sliderPagination[n].classList.add(sel);
_updateNavigation(slides[n]);
} // _nextSlide
function _prevSlide(s){
var n,
sel = noDot(options.classes.selected),
activeSlide = document.querySelector(options.classes.slider + ' ' + options.classes.selected),
activeDot = document.querySelector(options.classes.pagination + ' ' + options.classes.selected);
if(s === undefined){
n = slidesList.indexOf(activeSlide) - 1;
} else {
n = s;
}
activeSlide.classList.remove(sel);
slides[n].classList.add(sel);
slides[n].classList.remove(noDot(options.classes.hidden));
slidesList.forEach(function(item, index){
if(index > n){
slides[index].classList.remove(noDot(options.classes.hidden));
}
});
activeDot.classList.remove(sel);
sliderPagination[n].classList.add(sel);
_updateNavigation(slides[n]);
}
function _updateNavigation(active){
var inactive = noDot(options.classes.inactive);
if(slidesList.indexOf(active) === 0){
prev.classList.add(inactive);
} else {
prev.classList.remove(inactive);
}
if(slidesList.indexOf(active) === slides.length - 1){
next.classList.add(inactive);
} else {
next.classList.remove(inactive);
}
} // _updateNavigation
// Public API
var publicAPI = {
init: initialize,
opt: options,
update: update
};
return publicAPI;
})();
slider.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment