Carousel team

carousel-team.markdown

Carousel team

Concept carousel with some basic functions such as auto play. See: Chrome, Safari and firefox (bug)

A Pen by Marco Barría on CodePen.

License.

index.html

<!-- 
autor: Marco Barría 
https://twitter.com/marco_bf
-->

<div class="slider--teams">
  <div class="slider--teams__team">
    <ul id="list" class="cf">
      
      <li>
        <figure class="active">
          <div>
          	<div></div>
          </div>
          <figcaption>
            <h2>Billie</h2>
            <p>Head of Team</p>
          </figcaption>
        </figure>
      </li>
      
      <li>
        <figure>
          <div>
            <div></div>
          </div>
          <figcaption>
            <h2>Roger</h2>
            <p>Art Director</p>
          </figcaption>
        </figure>
      </li>
      
      <li>
        <figure>
          <div>
          	<div></div>
          </div>
          <figcaption>
            <h2>Wendy</h2>
            <p>Designer</p>
          </figcaption>
        </figure>
      </li>
      
      <li>
        <figure>
          <div>
          	<div></div>
          </div>
          <figcaption>
            <h2>Bill</h2>
            <p>Development</p>
          </figcaption>
        </figure>
      </li>
      
      <li>
        <figure>
          <div>
          	<div></div> 
          </div>
          <figcaption>
            <h2>Lorraine</h2>
            <p>Front-End Development</p>
          </figcaption>
        </figure>
      </li>
      
      <li>
        <figure>
          <div>
          	<div></div> 
          </div>
          <figcaption>
            <h2>Wesley</h2>
            <p>Marketing Lead</p>
          </figcaption>
        </figure>
      </li>
      
    </ul>
  </div>
</div>

script.js

var sliderTeam = (function(document, $) {
  
  'use strict';
  
  var $sliderTeams = $('.slider--teams'),
      $list = $('#list'),
      $listItems = $('#list li'),
      $nItems = $listItems.length,
      $nView = 3,
      autoSlider,
      $current = 0,
      $isAuto = true,
      $acAuto = 2500,
      
      _init = function() {
        _initWidth();
        _eventInit();
      },
      
      _initWidth = function() {
        $list.css({
          'margin-left': ~~(100 / $nView) + '%',
          'width': ~~(100 * ($nItems / $nView)) + '%'
        });
        $listItems.css('width', 100 / $nItems + '%');
        $sliderTeams.velocity({ opacity: 1 }, { display: "block" }, { delay:1000 });
      },
      
      _eventInit = function() {
        
        window.requestAnimFrame = (function() {
          return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(callback, element){
                window.setTimeout(callback, 1000 / 60);
              };
        })();

        window.requestInterval = function(fn, delay) {
            if( !window.requestAnimationFrame       && 
                !window.webkitRequestAnimationFrame && 
                !window.mozRequestAnimationFrame    && 
                !window.oRequestAnimationFrame      && 
                !window.msRequestAnimationFrame)
                    return window.setInterval(fn, delay);
            var start = new Date().getTime(),
            handle = new Object();

            function loop() {
                var current = new Date().getTime(),
                delta = current - start;
                if(delta >= delay) {
                    fn.call();
                    start = new Date().getTime();
                }
                handle.value = requestAnimFrame(loop);
            };
            handle.value = requestAnimFrame(loop);
            return handle;
        }

        window.clearRequestInterval = function(handle) {
            window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
            window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value)   :
            window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
            window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
            window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
            clearInterval(handle);
        };
        
        $.each($listItems, function(i) {
          var $this = $(this);
          $this.on('touchstart click', function(e) {
            e.preventDefault();
            _stopMove(i);
            _moveIt($this, i);
          });
        });
        
        autoSlider = requestInterval(_autoMove, $acAuto);
      },
      
      _moveIt = function(obj, x) {
        
        var n = x;
        
        obj.find('figure').addClass('active');        
        $listItems.not(obj).find('figure').removeClass('active');
        
        $list.velocity({
          translateX: ~~((-(100 / $nItems)) * n) + '%',
          translateZ: 0
        }, {
          duration: 1000,
          easing: [400, 26],
          queue: false
        });
        
      },
      
      _autoMove = function(currentSlide) {
        if ($isAuto) { 
          $current = ~~(($current + 1) % $nItems);
        } else {
          $current = currentSlide;
        }
        console.log($current);
        _moveIt($listItems.eq($current), $current);
      },
      
      _stopMove = function(x) {
        clearRequestInterval(autoSlider);
        $isAuto = false;
        _autoMove(x);
      };
  
  return {
    init: _init
  };

})(document, jQuery);

$(window).load(function(){
  'use strict';
  sliderTeam.init();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>

style.scss

// Ease

$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);

* {
  margin: 0;
  padding: 0;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
}

ul {
  li {
    list-style-type: none;
  }
}

.slider--teams {
  position: relative;
  top: 50%;
  left: 50%;
  max-width: 750px;
  opacity: 0;
  transform: translate(-50%, -50%);
  .slider--teams__team {
    position: relative;
    overflow: hidden;
  }
}

#list {
  position: relative;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  li {
    position: relative;
    display: inline-block;
    float: left;
    text-align: center;
    figure {
      cursor: pointer;
      margin: 1em;
      opacity: 0.5;
      backface-visibility: hidden;
      transition: transform 450ms $easeInOutSine, opacity 450ms ease-in-out;
      transform: scale(0.5) translateZ(0px);
      &:hover {
        opacity: 0.8;
        transform: scale(0.6) translateZ(0px);
      }
      &:active {
        opacity: 1;
        transform: scale(0.7) translateZ(0px);
      }
      > div {
        border-radius: 5px;
        position: relative;
        margin: 2rem auto;
        width: 120px;
        height: 120px;
        overflow: hidden;
        transform: rotate(45deg) translateZ(0px);
        > div {
          background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/teams.jpg) no-repeat;
          background-size: cover;
          background-position: 0px 0px; 
          position: absolute;
          top: 50%;
          left: 50%;
          width: 170px;
          height: 170px;
          transform: rotate(-45deg) translate(0%, -70%);
        }
      }
      figcaption {
        h2 {
          color: #333;
          font-size: 1.6rem;
          font-weight: 800;
        }
        p {
          color: #666;
          font-size: 0.9rem;
          font-weight: 400;
        }
      }
    }
    &:nth-child(1) figure > div > div {
    background-position: 0px 0px !important;
  }
    &:nth-child(2) figure > div > div {
    background-position: 0px 20% !important;
  }
    &:nth-child(3) figure > div > div {
    background-position: 0px 40% !important;
  }
    &:nth-child(4) figure > div > div {
    background-position: 0px 60% !important;
  }
    &:nth-child(5) figure > div > div {
    background-position: 0px 80% !important;
  }
    &:nth-child(6) figure > div > div {
    background-position: 0px 100% !important;
  }

  }
}

.active {
  opacity: 1 !important;
  transform: scale(1) translateZ(0px) !important;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}