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

  • Select an option

    Learn more about clone URLs
  • Save sephi-dev/29d35faaabcfdc9492cd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sephi-dev/29d35faaabcfdc9492cd to your computer and use it in GitHub Desktop.
Download ZIP
Slider.js
Raw
index.html
<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>
<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 class="navigation-container">
<ul class="navigation-slider clearfix">
<li class="slide-nav nav-1"><a class="link active" href="#" data-href="0">step 1</a></li>
<li class="slide-nav nav-2"><a class="link" href="#" data-href="1">step 2</a></li>
<li class="slide-nav nav-3"><a class="link" href="#" data-href="2">step 3</a></li>
<li class="slide-nav nav-4"><a class="link" href="#" data-href="3">step 4</a></li>
<li class="slide-nav nav-5"><a class="link" href="#" data-href="4">step 5</a></li>
<li class="slide-nav nav-6"><a class="link" href="#" data-href="5">step 3</a></li>
<li class="slide-nav nav-7"><a class="link" href="#" data-href="6">step 4</a></li>
<li class="slide-nav nav-8"><a class="link" href="#" data-href="7">step 5</a></li>
<li class="slide-nav nav-9"><a class="link" href="#" data-href="8">step 3</a></li>
<li class="slide-nav nav-10"><a class="link" href="#" data-href="9">step 4</a></li>
<li class="slide-nav nav-11"><a class="link" href="#" data-href="10">step 5</a></li>
<li class="slide-nav nav-12"><a class="link" href="#" data-href="11">step 5</a></li>
</ul>
</div>
Raw
QbWdzg.markdown
Raw
script.js
$(function() {
$('.slider').each(function() {
sliders.push(new Slider(this));
});
Slider.prototype.clickEl();
});
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;
},
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');
}
}
self.goTo(step);
});
};
}
}
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';
}
}
};
})();
Raw
style.css
.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-container {
width: 90%;
margin: 30px 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:-7px;
}
.navigation-slider .slide-nav a{
display: block;
text-indent: -9999px;
width:14px;
height:14px;
background:#FF6666;
border-radius:50%;
border:2px solid #FF6666;
}
.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