Polygon Image Slider

index.html

<div class="prev"></div>
<div class="next"></div>
<div class=polygon>  
  <div class="spinner">
	<div class="side passive">
      <img src="http://ingress.xanderhyde.com/downloads/ingress_R_1920x1200_by_Xanderhyde.jpg" alt="" />
    </div>
        <div class="side">
      <img src="http://ingress.xanderhyde.com/downloads/ingress_R_1920x1200_by_Xanderhyde.jpg" alt="" />
    </div>
	<div class="side">
      <img src="https://lh5.googleusercontent.com/-adX5umUE_YI/UO71unG82DI/AAAAAAAADL8/f-1roZ0shw8/w800-h800/ingress.JPG" alt="" />
    </div>
    <div class="side">
      <img src="http://4.bp.blogspot.com/-zAxaxgcy2n4/UMNscCDMUyI/AAAAAAAABn4/zxg5rG8Iv9g/s1600/Portal.jpg" alt="" />
    </div>
    <div class="side">
      <img src="https://lh4.googleusercontent.com/--X5FcfA1uAQ/UVQsl81sNbI/AAAAAAAAAEM/uZm1OpUQxOk/w500/Ingress.jpg" alt="" />
    </div>
    <div class="side">
      <img src="https://lh5.googleusercontent.com/-QmbNU7ToUdQ/UN_WP3RmJwI/AAAAAAAAG3M/soNQKlaawsc/w500/Ingress-Zelda.jpg" alt="" />
    </div>
    <div class="side">
      <img src="http://ingressportal.com/w/wp-content/uploads/2012/12/wayne.ingress.jpg" alt="" />
    </div>
    <div class="side">
      <img src="https://lh6.googleusercontent.com/-G5vp9mq7CJI/UYwq7Yk0BvI/AAAAAAAAHvc/CQgee2a_Yw8/w800-h800/xmp_01.jpg" alt="" />
    </div>
  </div>
</div>
<div class="imagelist"></div>
<div class="info"></div>

Polygon-Image-Slider.markdown

Polygon Image Slider

A Pen by Berkay on CodePen.

License.

script.js

$(function(){
  setImagePolygon();
  
  var imagelist = $('.side');
  imagelist.each(function(i,e){
    var cb = $(document.createElement('input'));
    cb.attr('type','checkbox')
    .attr('data-index',i);
    if($(e).hasClass('passive'))
      cb.removeAttr('checked');
    else
      cb.attr('checked','checked');
    
    $('.imagelist').append(cb).append('image' + (i + 1));
  });
});

var rotation;
var angle;

function setImagePolygon(){
  var images = $('.side:not(.passive)');
  var startAngle = 0;
  var w = images.width();
  var n = images.length;
  angle = 360 / images.length;
  var r = w / (2 * Math.sin((angle/2)*Math.PI/180));
  var h = Math.sqrt(Math.pow(r,2) - (Math.pow(w/2,2)));
  rotation = 0;
  var even = (images.length % 2 === 0);

  $('.info').html('');
  logInfo('h= ' +h);
  logInfo('n=' + n);
  logInfo('even=' + even);
  logInfo('r=' + r);
  logInfo('angle=' + angle);

  if(n < 3){
      images.css('transform','rotateY(0deg) translateZ(0px)');
  }
  else{
    images.each(function(i,e){
      if(i===0){
        $(e).css('transform','translateZ('+ h +'px)');
      }else
        $(e).css('transform','rotateY('+startAngle+'deg) translateZ('+ h +'px)');
      startAngle= startAngle+angle; 
    });
  }
}
$('.imagelist').on('change','input',function(){
  if(this.checked)
    $($('.side')[$(this).data('index')]).removeClass('passive');
  else
    $($('.side')[$(this).data('index')]).addClass('passive');
  
  setImagePolygon();
});

function logInfo(i){
  $('.info').append('<br/>'+i);
}

function rotate(d){
  var dim = d > 0 ? 1:-1;
  
  var newRotation = (rotation + (angle * dim));
  
  $('.spinner').css('transform','rotateY('+ newRotation + 'deg)');
  rotation = newRotation;
}

$('.next').on('click',function(e){
  rotate(1);
});

$('.prev').on('click',function(e){
  rotate(-1);
});
/*
var touchX,touchY,move;

//$('.polygon').on({ 'touchstart' : function(e){ console.log(e); } });
$( ".polygon" )[0].addEventListener('touchstart', function(e) {
    e.preventDefault();
  if($(e.target).parent().hasClass('side')){
    var touch = e.touches[0];
    touchX = touch.pageX;
    touchY = touch.pageY;
  }
}, false);
//$( ".polygon" ).mousemove(function( e ) {console.log(e);});

$( ".polygon" )[0].addEventListener('touchmove', function(e) {
    e.preventDefault();
  var touch = e.touches[0];
  if($(e.target).parent().hasClass('side') && touchX != null){
    move = (touch.pageX - touchX);
    //touchX = touch.pageX;
    console.log(move);
    if(move > (r / 2))
      rotate(1);
    else if(move < (-1 * w / 2))
      rotate(-1);
    else
      $('.spinner').css('transform','rotateY('+ move + 'deg)');
  }
}, false);

$( ".polygon" )[0].addEventListener('touchend', function(e) {
    e.preventDefault();
  if(move)
    touchX = null;
    touchY = null;
}, false);*/

style.css

.info{position:relative;top:150px;left:10px;z-index:3;}
.polygon{
-webkit-perspective: 800;
-moz-perspective: 800px;
-ms-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 0;
-moz-perspective-origin: 50% 0;
-ms-perspective-origin: 50% 0;
perspective-origin: 50% 0;
margin:50px auto;
width:320px;height:300px;
}

.side{background-color:black;
  width:320px;
  height:240px;
  overflow:hidden;
  position:absolute;
}
.passive{display:none;}
.spinner{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
position:relative;
transition:all 1s ease-in;
}

.side img{position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
opacity:0.7;
width:320px;
height:240px;
}

.next,.prev{position:absolute;width:50%;height:100%;top:0;cursor:pointer;opacity:0.5;z-index: 2;}
.next{right:0;}
.prev{left:0;}

.imagelist{position:relative;background-color:#fff;z-index:2;top:150px;left:10px;right:0;margin:auto;}