Merhabalar,

Bu yazımda sitenize video slider ekleme işleminden bahsedeceğim. Slider modülü olarak Owl Carousel 2 kullanacağım.

Öncelikle Owl Carousel 2 Kullanımı ve kurulumu ile ilgili detaylı bir yazı paylaşmıştım. Daha önce hiç Owl kullanmadıysanız veya sitenize entegre etmediyseniz o yazıyı incelemenizi tavsiye ederim.

Hatırlayacağınız üzere, Owl Carousel'i varsayılan değerlerle çalıştırmak için aşağıdaki JavaScript kodunu kullanıyorduk:

<script>
  $(document).ready(function(){
    $('.owl-carousel').owlCarousel();
  });
</script>

Bu kod Owl Carousel’i varsayılan ayarlarla başlatır. Şimdi ise sitenizde video slider kullanmak istiyorsanız aşağıdaki gibi bir yapı kurabilirsiniz:

<div class="owl-carousel owl-theme">
  <div class="item-video">
    <a class="owl-video" href="https://vimeo.com/23924346"></a>
  </div>
  <div class="item-video">
    <a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a>
  </div>
  <div class="item-video">
    <a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a>
  </div>
</div>

Gördüğünüz gibi işlemler oldukça basit. Slider içerisine item-video class’ına sahip kutular ve her birine owl-video class’lı bir bağlantı eklemeniz yeterli.

Eğer birden fazla video aynı anda gösterilsin istiyorsanız items ayarını arttırabilirsiniz.

Daha fazla özelleştirme ve detay için Owl Carousel’in kendi dökümantasyonuna göz atmanızı öneririm.

Umarım anlaşılır olmuştur ve bir gün işinize yarar.

Mutlu Kodlamalar :)