carousel

carousel.markdown

carousel

A Pen by Bob Anderson on CodePen.

License.

index.html

<div class="wrapper">
  <ul class="classifies">
    <li class="classify">
      <img class="classify_img" src="" />
      <label for="classify_1" class="classify_label" title="Phân loại 1"></label>
      <input type="file" id="classify_1" class="classify_file" />
      <input type="text" class="classify_input" placeholder="Nhập tên phân loại" />
    </li>
  </ul>
  <div class="prev" data-increment="-1"></div>
  <div class="next" data-increment="1"></div>
</div>
<button class="add">Thêm Phân Loại</button>

script.js

$( document ).ready( function() {
  var theta = 0;
  var carousel = $( '.classifies' );
  var r = 0;
  var offset = 0;
  var offset2 = 1;
    
  $( '.prev, .next' ).on( 'click', function() {
    var increment = parseInt( $( this ).data( 'increment' ) );
    var panelCount = $( '.classify' ).length;
    theta += ( 360 / panelCount ) * increment * -1;
    carousel.css( 'transform', 'translateZ( -' + r + 'px ) rotateY(' + theta + 'deg)' );
    
    //Hide outer panel & show inner panel
    var index = [ panelCount - 1 ];
    $.each( $( '.classify' ), function() {
      index.push( $( this ).index() );
    } )
    index.push( 0 );
    
    console.log( index );
    
    $( '.classify' ).css( 'visibility', 'hidden' );
    
    switch( increment ) {
      case 1: 
        offset++;
        $( '.classify:eq( ' + index[offset].toString() + ' )' ).css( 'visibility', 'visible' );
        $( '.classify:eq( ' + index[offset + 1].toString() + ' )' ).css( 'visibility', 'visible' );
        $( '.classify:eq( ' + index[offset + 2].toString() + ' )' ).css( 'visibility', 'visible' );
        break;
      case -1: 
        for( i = offset2; i > offset2 - 3; i-- ) {
          $( '.classify:eq( ' + index[i].toString() + ' )' ).css( 'visibility', 'visible' );
        }
        offset2--;
        break;
       
    }
    
  } )
  
  $( '.add' ).on( 'click', function() {
    var panelCount = $( '.classify' ).length;
    var add = (panelCount + 1).toString();
    var id = 'classify_' + add;
    var li = '<li class="classify"><img class="classify_img" src="" /><label for="' + id + '" class="classify_label" title="Phân loại ' + add + '"></label><input type="file" id="' + id + '" class="classify_file" /><input type="text" class="classify_input" placeholder="Nhập tên phân loại" /></li>';
    
    //Append
    carousel.append( li );
    
    //Set 3D space
    var theta = 360 / (panelCount + 1); //Addition with 1 for new li
    r = Math.round( 150 / Math.tan( Math.PI / (panelCount + 1) ) );
    
    for( i = 0; i <= panelCount; i++  ) {
      var index = i.toString();
      var style = 'rotateY(' + i*theta + 'deg)' + ' translateZ( ' + r + 'px )';
      $( '.classify:eq( ' + index + ' )' ).css( '-webkit-transform' , style );
      $( '.classify:eq( ' + index + ' )' ).css( '-moz-transform' , style );
      $( '.classify:eq( ' + index + ' )' ).css( '-o-transform' , style );
      $( '.classify:eq( ' + index + ' )' ).css( 'transform' , style );
      
      //Hide outer panel
      if( i != 0 && i != panelCount && i != 1 ) {
        $( '.classify:eq( ' + index + ' )' ).css( 'visibility', 'hidden' );
      }
    }
    
    //Reset translateZ
    carousel.css( '-webkit-transform' , 'translateZ(-'+ r + 'px)' );
    
    
    //Addition with 1 for offset2
    offset2++;
  } )
} )

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

.wrapper {
  width: 300px;
  height: 250px;
  text-align: center;
  perspective: 1100px;
  margin: 0 auto;
  border: 2px solid #ddd;
}

.classifies {
  padding: 0; /*Reset ul padding*/
  margin: 0; /*Reset ul margin*/
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s; /*Reset circle radius*/
}

.classify {
  list-style: none;
  display: block;
  width: 280px;
  height: 230px;
  margin: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.classify_img {
  cursor: pointer;
  width: 100%;
  height: 200px;
  display: block;
  border: 1px solid #eee;
}

.classify_input {
  border: none;
  font-size: 14px;
  padding: 0 10px;
  color: #457585;
  text-align: center;
  height: 30px;
  width: 200px;
  line-height: 30px;
  border-bottom: 2px solid #457585;
}

.classify_input:focus {
  outline: none;
}

.prev {
  position: absolute;
  width: 150px;
  height: 200px;
  left: -200px;
  top: 0;
  cursor: pointer;
}

.next {
  position: absolute;
  width: 150px;
  height: 200px;
  right: -200px;
  top: 0;
  cursor: pointer;
}

.classify_label {
  display: block;
  position:absolute;
  top: 0px;
  left: 0px;
  width: 280px;
  height: 200px;
  cursor: pointer;
}

.classify_file {
  display: none;
}