» » » jQuery Image Slider With Three Panels and 3D Look

jQuery Image Slider With Three Panels and 3D Look

Add Comment ,
Dalam tutorial ini kita akan membuat jQuery image slider with three panels and 3D look. Idenya adalah untuk memiliki panel utama dan dua panel lateral yang yang sedikit diputar dalam ruang 3D. Bila menavigasi, kita akan melihat masing-masing gambar berikutnya di setiap panel. Kita akan menggunakan CSS 3D Mentransformasi dengan perspektif dan CSS Transisi.

Langsung saja menuju ke TKP





Markup HTML

Struktur awal yang akan kita buat akan terdiri dari sebuah divisi dengan angka. Setiap angka akan berisi gambar dan figcaption dengan judul dan keterangan untuk gambar:
<div class="fs-slider" id="fs-slider">

 <figure>
  <img src="images/1.jpg" alt="image01" />
  <figcaption>
   <h3>Eloquence</h3>
   <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
  </figcaption>
 </figure>

 <figure>
  <img src="images/2.jpg" alt="image02" />
  <figcaption>
   <h3>Quintessential</h3>
   <p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
  </figcaption>
 </figure>

 <!-- ... -->

</div>
Kita akan memberi jQuery plugin untuk mengubah struktur yang akan menjadi satu, berikut ini source HTML:
<section class="fs-container">

 <div class="fs-wrapper">

  <div class="fs-slider" id="fs-slider">

   <div class="fs-block">

    <figure style="display: block; ">
     <img src="images/1.jpg" alt="image01" />
     <figcaption>
      <h3>Eloquence</h3>
      <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
     </figcaption>
    </figure>

   </div><!-- /fs-block -->

   <div class="fs-block">
    <!-- ... -->
   </div>

   <!-- ... -->

  </div><!-- /fs-slider -->

  <nav class="fs-navigation">
   <span>Previous</span>
   <span>Next</span>
  </nav>

 </div><!-- /fs-wrapper -->

</section><!-- /fs-container -->
Setiap angka akan dibungkus ke dalam wrapper dengan class fs-blok dan kita akan menambahkan navigasi untuk semuanya.

CSS

Karena kita ingin slider gambar menjadi responsif, kami akan memberikan persentase lebar. Tapi kita juga akan menentukan lebar minimal dan maksimal sehingga tidak menekan terlalu banyak atau tumbuh di luar proporsi atau melibihi tag div tsb. Kita akan menambahkan beberapa posisi ke samping karena blok kita akan diposisikan menggunakan CSS (semua gambar akan berada di tengah) dan yang tidak akan mempengaruhi lebar dari elemen:
.fs-container {
 margin: 20px auto 50px auto;
 position: relative;
 width: 40%;
 padding: 0 15%;
 max-width: 700px;
 min-width: 220px;
 height: 500px; 
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}

.fs-container:before {
 content: '';
 position: absolute;
 bottom: -40px;
 background: transparent url(../images/shadow.png) no-repeat center center;
 height: 90px;
 width: 90%;
 left: 5%;
 opacity: 0.8;
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 background-size: 100% 100%;
}

.fs-wrapper {
 width: 100%;
 height: 100%;
 position: relative;
 -webkit-perspective: 1000px;
 -moz-perspective: 1000px;
 -o-perspective: 1000px;
 -ms-perspective: 1000px;
 perspective: 1000px;
}

.fs-slider{
 width: 100%;
 height: 100%;
 position: absolute;
 display: none;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 pointer-events: none;
}

.fs-block {
 margin: 0;
 position: absolute;
 width: 70%;
 height: 100%;
 left: 15%;
 pointer-events: auto;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

.fs-block:nth-child(1) { 
 -webkit-transform-origin: top right;
 -webkit-transform: translateX(-100%) rotateY(-35deg);
 -moz-transform-origin: top right;
 -moz-transform: translateX(-100%) rotateY(-35deg);
 -o-transform-origin: top right;
 -o-transform: translateX(-100%) rotateY(-35deg);
 -ms-transform-origin: top right;
 -ms-transform: translate(-100%);
 transform-origin: top right;
 transform: translateX(-100%) rotateY(-35deg);
}
.no-touch .fs-block:nth-child(1):hover {
 -webkit-transform: translateX(-100%) rotateY(-30deg); 
 -o-transform: translateX(-100%) rotateY(-30deg);
 transform: translateX(-100%) rotateY(-30deg);
}

.fs-block:nth-child(2) {
 z-index: 100;
}

.fs-block:nth-child(3) {
 -webkit-transform-origin: top left;
 -webkit-transform: translateX(100%) rotateY(35deg);
 -moz-transform-origin: top left;
 -moz-transform: translateX(100%) rotateY(35deg);
 -o-transform-origin: top left;
 -o-transform: translateX(100%) rotateY(35deg);
 -ms-transform-origin: top left;
 -ms-transform: translate(100%);
 transform-origin: top left;
 transform: translateX(100%) rotateY(35deg);
}

.no-touch .fs-block:nth-child(3):hover {
 -webkit-transform: translateX(100%) rotateY(30deg); 
 -o-transform: translateX(100%) rotateY(30deg);
 transform: translateX(100%) rotateY(30deg);
}

.fs-block:after{
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: 1000;
 pointer-events: none;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border-left: 1px solid rgba(119,119,119,1);
 border-right: 1px solid rgba(119,119,119,1);
 left: -1px;
}

/* Borders are only needed if we have the 3d look */
.no-csstransforms3d .fs-block:after {
 border: none;
}

.fs-block:nth-child(1):after {
 background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.2)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
}

.fs-block:nth-child(2):after {
 opacity: 0.8;
 background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 21%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.03) 70%, rgba(0,0,0,0.12) 81%, rgba(0,0,0,0.5) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(21%,rgba(0,0,0,0.12)), color-stop(31%,rgba(0,0,0,0.03)), color-stop(50%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,0.03)), color-stop(81%,rgba(0,0,0,0.12)), color-stop(100%,rgba(0,0,0,0.5)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
}

.fs-block:nth-child(3):after {
 background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.65)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
}

.fs-block figure {
 width: 100%;
 height: 100%;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 z-index: 1;
}

.fs-block figure:first-child{
 z-index: 10;
}

.fs-block figure img {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
}

.fs-block figcaption {
 padding: 0 20px;
 margin: 0;
 position: absolute;
 width: 100%;
 top: 25%;
 background: rgba(0,0,0,0.4);
 overflow: hidden;
 height: 0%;
 opacity: 0;
 text-align: center;
 -webkit-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -moz-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -o-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -ms-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 transition: all 700ms cubic-bezier(0, 0, .15, 1);
}

.fs-block figcaption.fs-transition {
 height: 35%;
 opacity: 1;
}

.fs-block figcaption h3 {
 font-size: 40px;
 line-height: 40px;
 margin: 0;
 padding: 20px 0;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 font-family: 'Prata', serif;
 font-weight: normal;
}

.fs-block figcaption p {
 color: #fff;
 padding: 20px 0;
 margin: 0;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 border-top: 1px solid rgba(255,255,255,0.2);
 box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

.fs-navigation {
 position: absolute;
 z-index: 2000;
 bottom: 10px;
 right: 15%;
 margin-right: 15px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.fs-navigation span {
 float: left;
 width: 26px;
 height: 26px;
 border-radius: 4px;
 text-indent: -90000px;
 cursor: pointer;
 opacity: 0.6;
 margin-right: 3px;
 background: rgba(0,0,0,0.4) url(../images/arrow.png) no-repeat 50% 50%;
 -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 -ms-transition: all 0.3s linear;
 transition: all 0.3s linear;
 pointer-events: auto;
}

.fs-navigation span:nth-child(2) {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
}

.fs-navigation span:hover{
 opacity: 1;
}

/* Transitions */
.fs-block:nth-child(1) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
}
.fs-block:nth-child(2) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
}
.fs-block:nth-child(3) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 transition: width 900ms cubic-bezier(0, 0, .15, 1);
}

/* Media Queries */

@media screen and (max-width: 1024px) {
 .fs-block figcaption h3 {
  font-size: 26px;
 }
}

@media screen and (max-width: 768px) {
 .fs-block figcaption {
  padding: 0 10px;
 }
 .fs-block figcaption h3 {
  font-size: 16px;
  padding: 10px 0;
 }
 .fs-block figcaption p {
  font-size: 13px;
 }
}

Javascript

Pilihan Plugin kami hanya akan memiliki pengaturan autoplay. Seperti telah kita lihat sebelumnya, kita mengatur konfigurasi transisi dalam CSS.
$.ImgSlider.defaults = {
 autoplay : false,
 interval : 4000
};
Kita akan mulai dengan preloading semua gambar, setelah itu kita akan menjalankan fungsi _init:
_init    : function( options ) {

 // options
 this.options   = $.extend( true, {}, $.ImgSlider.defaults, options );

 this.current   = 0;

 // https://github.com/twitter/bootstrap/issues/2870
 var transEndEventNames = {
  'WebkitTransition' : 'webkitTransitionEnd',
  'MozTransition'  : 'transitionend',
  'OTransition'  : 'oTransitionEnd',
  'msTransition'  : 'MSTransitionEnd',
  'transition'  : 'transitionend'
 };
 this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

 // the initial elements
 this.$initElems   = this.$el.children( 'figure' );
 // total number of elements
 this.initElemsCount  = this.$initElems.length;

 if( this.initElemsCount &lt; 3 ) {

  return false;

 }

 // build layout
 this._layout();
 // init events
 this._initEvents();

 // autoplay on
 if( this.options.autoplay ) {

  this._startSlideshow();

 }

}
_layout    : function() {

 this.$initElems.wrapAll( '<div class="fs-temp">
</div>
' ).hide();

 this.$initElems
  .filter( ':lt(3)' )
  .clone()
  .show()
  .prependTo( this.$el )
  .wrap( '<div class="fs-block">
</div>
' );

 this.$el
  .wrap( '<section class="fs-container"></section>' )
  .wrap( '<div class="fs-wrapper">
</div>
' );

 this.$blocks = this.$el.children( 'div.fs-block' );

 // cache the 3 main blocks
 this.$blockL = this.$blocks.eq( 0 );
 this.$blockC = this.$blocks.eq( 1 );
 this.$blockR = this.$blocks.eq( 2 );

 this.$blockC.find( 'figcaption' ).addClass( 'fs-transition' );

 // all items
 this.$temp  = this.$el.find( 'div.fs-temp' );

 // resize images
 this._resizeBlocks();

 // add navigation if needed
 if( this.initElemsCount &gt; 3 ) {

  var $nav = $( '<nav class="fs-navigation">PreviousNext</nav>' ).appendTo( this.$el.parent() );

  // next and previous
  this.$navPrev = $nav.find( 'span:first' );
  this.$navNext = $nav.find( 'span:last' );

  this._initNavigationEvents();

 }

}
_initNavigationEvents : function() {

 var _self = this;

 this.$navPrev.on( 'click.imgslider', function() {

  if( _self.options.autoplay ) {

   clearTimeout( _self.slideshow );
   _self.options.autoplay = false;

  }

  _self._navigate( 'left' );

 } );
 this.$navNext.on( 'click.imgslider', function() {

  if( _self.options.autoplay ) {

   clearTimeout( _self.slideshow );
   _self.options.autoplay = false;

  }

  _self._navigate( 'right' );

 } );

}

_navigate    : function( dir ) {

 if( this.isAnimating === true ) {

  return false;

 }

 this.isAnimating = true;

 var _self = this,
  $items = this.$temp.children(),
  LIndex, CIndex, RIndex;

 this.$blocks.find( 'figcaption' ).hide().css( 'transition', 'none' ).removeClass( 'fs-transition' );

 if( dir === 'right' ) {

  LIndex = this.current + 1;
  CIndex = this.current + 2;
  RIndex = this.current + 3;

  if( LIndex &gt;= this.initElemsCount ) {

   LIndex -= this.initElemsCount

  }

  if( CIndex &gt;= this.initElemsCount ) {

   CIndex -= this.initElemsCount

  }

 }
 else if( dir === 'left' ) {

  LIndex = this.current - 1;
  CIndex = this.current;
  RIndex = this.current + 1;

  if( LIndex &lt; 0 ) {

   LIndex = this.initElemsCount - 1

  }

 }

 if( RIndex &gt;= this.initElemsCount ) {

  RIndex -= this.initElemsCount

 }

 var $elL = $items.eq( LIndex ).clone().show(),
  $elC = $items.eq( CIndex ).clone().show(),
  $elR = $items.eq( RIndex ).clone().show();

 // resize images
 $elL.children( 'img' ).css( this.$blockL.data( 'imgstyle' ) );
 $elC.children( 'img' ).css( this.$blockC.data( 'imgstyle' ) );
 $elR.children( 'img' ).css( this.$blockR.data( 'imgstyle' ) );

 this.$blockL.append( $elL );
 this.$blockC.append( $elC );
 this.$blockR.append( $elR );

 // now show new images

 var $slides = this.$blocks.find( 'figure:first' ).css( 'width', '0%');

 if( Modernizr.csstransitions ) {

  $slides.on( this.transEndEventName, function( event ) {

   var $this   = $( this ),
    blockIdx = $this.parent().index('');

   _self._slideEnd( dir, blockIdx, $elC );

   $this.off( _self.transEndEventName ).remove();

  } );

 }
 else {

  $slides.each( function() {

   var $this   = $( this ),
    blockIdx = $this.parent().index('');

   _self._slideEnd( dir, blockIdx, $elC );

  } );

  this._slideEnd();

 }

}
_slideEnd    : function( dir, blockIdx, $main ) {

 if( blockIdx === 0 ) {

  if( this.current === this.initElemsCount - 1 &amp;&amp; dir === 'right' ) {

   this.current = 0;

  }
  else if( this.current === 0 &amp;&amp; dir === 'left' ) {

   this.current = this.initElemsCount - 1;

  }
  else {

   ( dir === 'right' ) ? ++this.current : --this.current;

  }

  this.isAnimating = false;

 }
 else if( blockIdx === 1 ) {

  $main.find( 'figcaption' ).addClass( 'fs-transition' );

 }

}
_initEvents    : function() {

 var _self = this;

 $window.on( 'debouncedresize.imgslider', function() {

  _self._resizeBlocks();

 } );

},
// resize the images
_resizeBlocks   : function() {

 var _self = this;

 this.$blocks.each( function( i ) {

  var $el  = $( this ).children( 'figure' ),
   $img = $el.children( 'img' ),
   dim  = _self._getImageDim( $img.attr( 'src' ), { width : $el.width(), height : $el.height() } );

  // save the image dimentions
  switch( i ) {
   case 0 : _self.$blockL.data( 'imgstyle', dim ); break;
   case 1 : _self.$blockC.data( 'imgstyle', dim ); break;
   case 2 : _self.$blockR.data( 'imgstyle', dim ); break;
  };

  // apply style
  $img.css( dim );

 } );

}




Dan itu saja artikel mengenai jQuery image slider with three panels and 3D look! Saya harap Anda menikmati tutorial ini dan merasa berguna!
Jika ada pertanyaan kita bahas di form komentar di bawah..
Terima kasih!

0 Response to " jQuery Image Slider With Three Panels and 3D Look"

Post a Comment

Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas).

Subscribe to: Post Comments (Atom)