Kali ini saya  ingin membuat produk slideshow dengan animasi transform gambar dengan jQuery dan plugin jquery Owl Carousel.

Sekilas tentang Owl Carousel

Plugin ini cukup sering saya gunakan untuk membuat slideshow dalam pembuatan Website. Banyak yang bisa kita lakukan dengan plugin tersebut, Nah di area bermain kali ini saya akan membuat produk slideshow dengan bantuan plugin tersebut.

Cara menggunakan plugin tersebut sangat sederhana sebagai :

 $(".owl-carousel").owlCarousel();

Tetapi banyak option-option yang digunakan di Produk Slideshow yang akan saya buat.

Struktur HTML

 <div class="slide-item">
   <div class="innerwrap">         
          
      <img src="img/produk-4.png" />             
       <div class="text">
         <h3>Naiki Aer Jordan</h3>
          <p>
              Lorem ipsum sepatu dipakai untuk alas kaki, 
              Bukan untuk dipakai alasan, dan juga bukan asal asalan.
          </p>
                        
       </div>
       <div class="price">
          <button>Learn More</button>
       </div>

  </div>           
</div><!-- Slide Item-->

Preview