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

Revisions

  1. David revised this gist Apr 23, 2015. 4 changed files with 328 additions and 231 deletions.
    7 changes: 7 additions & 0 deletions Slider.js.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Slider.js
    ---------
    thanks to @arnaudhuc & @ronanlevesque to make it works properly !

    A [Pen](http://codepen.io/davidvenin/pen/QbWdzg) by [davidvenin](http://codepen.io/davidvenin) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/davidvenin/pen/QbWdzg/license).
    304 changes: 164 additions & 140 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,153 +1,177 @@
    <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>
    <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="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 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="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 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="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 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="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 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="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 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="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 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="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 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="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 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="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 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="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 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>

    <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>
    135 changes: 81 additions & 54 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,56 +3,9 @@ $(function() {
    sliders.push(new Slider(this));
    });
    Slider.prototype.clickEl();
    Slider.prototype.navigate();
    });

    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';

    @@ -73,9 +26,8 @@ var utils = utils || (function() {
    },
    getNextElementSibling: function(el) {
    if (el.nextElementSibling) {
    return el.nextElementSibling;
    }
    else {
    return el.nextElementSibling;
    } else {
    do {
    el = el.nextSibling;
    }
    @@ -86,14 +38,14 @@ var utils = utils || (function() {
    elementInViewport: function(el) {
    var rect = el.getBoundingClientRect();
    return (
    rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    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) {
    if (thisHeight > maxHeight) {
    maxHeight = thisHeight;
    }
    }
    @@ -102,4 +54,79 @@ var utils = utils || (function() {
    }
    }
    };
    })();
    })();

    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();
    }
    });
    }*/
    113 changes: 76 additions & 37 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,8 @@
    .slider-container {
    position: relative;
    width: 800px;
    margin: 0 auto;
    }
    .slider {
    width: 760px;
    overflow: hidden;
    @@ -63,29 +68,45 @@
    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: 30px auto;
    margin: 80px auto;
    position: relative;
    }

    .navigation-slider::after,
    .navigation-slider::before {
    position: absolute;
    display: block;
    top:-6px;
    top: -6px;
    content: '';
    width: 15px;
    height: 15px;
    background: #E6CA8C;
    border-radius: 50%;
    }
    .navigation-slider::before{
    left:0;

    .navigation-slider::before {
    left: 0;
    }
    .navigation-slider::after{
    right:0;

    .navigation-slider::after {
    right: 0;
    }

    .navigation-container .navigation-slider {
    @@ -94,65 +115,83 @@
    background: #E6CA8C;
    position: relative;
    }

    .navigation-slider .slide-nav {
    list-style: none;
    position: absolute;
    top:-7px;
    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{

    .navigation-slider .slide-nav a {
    display: block;
    text-indent: -9999px;
    width:14px;
    height:14px;
    background:#FF6666;
    border-radius:50%;
    border:2px solid #FF6666;
    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;
    .navigation-slider .slide-nav a:hover {
    background: white;
    }

    .nav-1 {
    left:5%;
    left: 5%;
    }

    .nav-2 {
    left:10%;
    left: 10%;
    }

    .nav-3 {
    left:18%;
    left: 18%;
    }

    .nav-4 {
    left:24%;
    left: 24%;
    }

    .nav-5 {
    left:32%;
    left: 32%;
    }

    .nav-6 {
    left:39%;
    left: 39%;
    }

    .nav-7 {
    left:45%;
    left: 45%;
    }

    .nav-8 {
    left:51%;
    left: 51%;
    }

    .nav-9 {
    left:57%;
    left: 57%;
    }

    .nav-10 {
    left:64%;
    left: 64%;
    }

    .nav-11 {
    left:70%;
    left: 70%;
    }
    .nav-12 {
    left:80%;
    }








    .nav-12 {
    left: 80%;
    }
  2. David created this gist Apr 23, 2015.
    13 changes: 13 additions & 0 deletions QbWdzg.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    QbWdzg
    ------


    Forked from [Captain Anonymous](http://codepen.io/anon/)'s Pen [gpOONw](http://codepen.io/anon/pen/gpOONw/).

    Forked from [Captain Anonymous](http://codepen.io/anon/)'s Pen [gpOONw](http://codepen.io/anon/pen/gpOONw/).

    Forked from [Captain Anonymous](http://codepen.io/anon/)'s Pen [gpOONw](http://codepen.io/anon/pen/gpOONw/).

    A [Pen](http://codepen.io/davidvenin/pen/QbWdzg) by [davidvenin](http://codepen.io/davidvenin) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/davidvenin/pen/QbWdzg/license).
    153 changes: 153 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,153 @@
    <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>
    105 changes: 105 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    $(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';
    }
    }
    };
    })();
    158 changes: 158 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,158 @@
    .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%;
    }