Skip to content

Instantly share code, notes, and snippets.

@sephi-dev

sephi-dev/QbWdzg.markdown

Last active August 29, 2015 14:19
Show Gist options
  • Save sephi-dev/29d35faaabcfdc9492cd to your computer and use it in GitHub Desktop.
Save sephi-dev/29d35faaabcfdc9492cd to your computer and use it in GitHub Desktop.
Download ZIP
Slider.js
Raw
index.html
<div class="slider-container">
<div id="prev" class="navigation navigation-prev">Prev</div>
<div id="next" class="navigation navigation-next">Next</div>
<div class="slider">
<ul class="slider-content">
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/nightlife-h-c-408-423-10.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/city-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/technics-h-c-408-423-6.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/people-h-c-408-423-9.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/fashion-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/fashion-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/fashion-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/fashion-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/fashion-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/fashion-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
<li class="slider-item">
<div class="slider-img">
<img src="http://lorempixel.com/output/fashion-h-c-408-423-3.jpg" alt="" />
</div>
<div class="slider-description">
<h6 class="slider-year">Décembre<br>2013</h6>
<p class="slider-text">
En maitrisant nous-mêmes la création des produits de A à Z, en supprimant les ers pouvons vous proposer des produits sains plus riches en nutrition, meilleurs en goût et mieux packagés directement chez vous, sans augmenter les prix.
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="navigation-container">
<ul class="navigation-slider clearfix">
<li class="slide-nav nav-1">
<span class="month">Sept.<br>2013</span>
<a class="link active" href="#" data-href="0">step 1</a>
</li>
<li class="slide-nav nav-2">
<span class="month">Dec.<br>2013</span>
<a class="link" href="#" data-href="1">step 2</a>
</li>
<li class="slide-nav nav-3">
<span class="month">Févr.<br>2014</span>
<a class="link" href="#" data-href="2">step 3</a>
</li>
<li class="slide-nav nav-4">
<span class="month">Mars.<br>2014</span>
<a class="link" href="#" data-href="3">step 4</a>
</li>
<li class="slide-nav nav-5">
<span class="month">Juin.<br>2014</span>
<a class="link" href="#" data-href="4">step 5</a>
</li>
<li class="slide-nav nav-6">
<span class="month">Sept<br>2014</span>
<a class="link" href="#" data-href="5">step 3</a>
</li>
<li class="slide-nav nav-7">
<span class="month">Oct.<br>2014</span>
<a class="link" href="#" data-href="6">step 4</a>
</li>
<li class="slide-nav nav-8">
<span class="month">Nov.<br>2014</span>
<a class="link" href="#" data-href="7">step 5</a>
</li>
<li class="slide-nav nav-9">
<span class="month">Dec.<br>2014</span>
<a class="link" href="#" data-href="8">step 3</a>
</li>
<li class="slide-nav nav-10">
<span class="month">Janv<br>2015</span>
<a class="link" href="#" data-href="9">step 4</a>
</li>
<li class="slide-nav nav-11">
<span class="month">Mars.<br>2014</span>
<a class="link" href="#" data-href="10">step 5</a>
</li>
</ul>
</div>
Raw
QbWdzg.markdown
Raw
script.js
$(function() {
$('.slider').each(function() {
sliders.push(new Slider(this));
});
Slider.prototype.clickEl();
Slider.prototype.navigate();
});
var utils = utils || (function() {
'use strict';
return {
hasClass: function(el, cl) {
var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
return !!el.className.match(regex);
},
addClass: function(el, cl) {
el.className += ' ' + cl;
},
removeClass: function(el, cl) {
var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
el.className = el.className.replace(regex, ' ');
},
toggleClass: function(el, cl) {
var testClass = this.hasClass(el, cl) ? this.removeClass(el, cl) : this.addClass(el, cl);
},
getNextElementSibling: function(el) {
if (el.nextElementSibling) {
return el.nextElementSibling;
} else {
do {
el = el.nextSibling;
}
while (el && el.nodeType !== 1);
return el;
}
},
elementInViewport: function(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
);
},
sameHeight: function(el) {
var maxHeight = 0;
for (var i = 0; i < el.length; i++) {
var thisHeight = el[i].offsetHeight;
if (thisHeight > maxHeight) {
maxHeight = thisHeight;
}
}
for (i = 0; i < el.length; i++) {
el[i].style.height = maxHeight + 'px';
}
}
};
})();
var sliders = [];
var Slider = function() {
this.initialize.apply(this, arguments)
};
Slider.prototype = {
initialize: function(slider) {
this.sliderContainer = slider.children[0];
this.sliderItem = this.sliderContainer.children;
this.sliderContainer.style.width = (this.sliderItem[0].clientWidth * this.sliderItem.length) + 'px';
this.currentIndex = 0;
},
goTo: function(index) {
var sliderContent = document.getElementsByClassName('slider-content');
var sliderItem = document.getElementsByClassName('slider-item');
if (index < 0 || index > sliderItem.length - 1)
return  
for (var i = 0; i < sliderContent.length; i++) {   
sliderContent[i].style.left = '-' + (100 * index) + '%';  
this.currentIndex = index;
}
console.log('Index methode goTo: '+index);
},
goToPrev: function() {
this.goTo(this.currentIndex - 1);
},
goToNext: function() {
this.goTo(this.currentIndex + 1);
},
clickEl: function() {
var link = document.getElementsByClassName('link');
var self = this;
var step;
for (var i = 0; i < link.length; i++) {
link[i].addEventListener('click', function(e) {
e.preventDefault();
step = this.getAttribute('data-href');
for (x = 0; x < link.length; x++) {
if (utils.hasClass(link[x], 'active')) {
utils.removeClass(link[x], 'active');
utils.addClass(this, 'active');
}
}
console.log('click on circles')
self.goTo(step);
});
};
},
navigate: function(){
var navigation = document.getElementsByClassName('navigation');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var self = this;
prev.addEventListener('click', function(e){
console.log('prev');
self.goToPrev();
});
next.addEventListener('click', function(e){
console.log('next');
self.goTo(self.currentIndex + 1);
});
}
}
/*for(var y = 0; y < navigation.length; y++){
navigation[y].addEventListener('click', function(e){
if(utils.hasClass(this, 'navigation-prev')){
console.log('prev btn')
self.goToPrev();
} else {
console.log('next btn')
self.goToNext();
}
});
}*/
Raw
Slider.js.markdown
Raw
style.css
.slider-container {
position: relative;
width: 800px;
margin: 0 auto;
}
.slider {
width: 760px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.slider .slider-content {
position: relative;
list-style: none;
height: 490px;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;
}
.slider .slider-content > .slider-item {
padding: 40px;
margin: 0;
float: left;
width: 760px;
height: 490px;
background: #FBFAF5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.slider .slider-img,
.slider .slider-description {
float: left;
height: 423px;
}
.slider .slider-img {
width: 401px;
margin-right: 30px;
}
.slider .slider-description {
width: 249px;
padding: 25px;
border: 2px solid #ff6666;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.slider-year {
font-size: 30px !important;
font-family: 'Oswald-Regular', Helvetica, arial, sans-serif;
line-height: 36px;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #ff6666;
}
.navigation {
cursor: pointer;
color: #E6CA8C;
text-transform:uppercase;
font-family: helvetica;
font-weight: bold;
position: absolute;
top:50%;
}
.navigation-prev {
left:-50px;
}
.navigation-next {
right:-50px;
}
.navigation-container {
width: 90%;
margin: 80px auto;
position: relative;
}
.navigation-slider::after,
.navigation-slider::before {
position: absolute;
display: block;
top: -6px;
content: '';
width: 15px;
height: 15px;
background: #E6CA8C;
border-radius: 50%;
}
.navigation-slider::before {
left: 0;
}
.navigation-slider::after {
right: 0;
}
.navigation-container .navigation-slider {
width: 100%;
height: 4px;
background: #E6CA8C;
position: relative;
}
.navigation-slider .slide-nav {
list-style: none;
position: absolute;
top: -58px;
}
.navigation-slider .slide-nav .month {
display: block;
padding-bottom: 10px;
font-family: 'Oswald-Light', arial, helvetica, sans-serif;
text-align: center;
color: #ff6666;
font-size: 16px;
line-height: 20px;
}
.navigation-slider .slide-nav a {
display: block;
text-indent: -9999px;
width: 14px;
height: 14px;
background: #FF6666;
border-radius: 50%;
border: 2px solid #FF6666;
margin: 0 auto;
}
.navigation-slider .slide-nav a.active,
.navigation-slider .slide-nav a:hover {
background: white;
}
.nav-1 {
left: 5%;
}
.nav-2 {
left: 10%;
}
.nav-3 {
left: 18%;
}
.nav-4 {
left: 24%;
}
.nav-5 {
left: 32%;
}
.nav-6 {
left: 39%;
}
.nav-7 {
left: 45%;
}
.nav-8 {
left: 51%;
}
.nav-9 {
left: 57%;
}
.nav-10 {
left: 64%;
}
.nav-11 {
left: 70%;
}
.nav-12 {
left: 80%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment