Carousel atau slider biasanya di gunakan untuk menampilkan beberapa foto, tapi bagaimana dengan video? apakah bisa juga di buat slidernya mengunakan angularjs? Apakah caranya sama atau beda?Blog saya kali ini akan membahas cara menampilkan video dalam bentuk carousel.
Yang perlu kita lakukan pertama kali adalah menyiapkan video yang akan di tampilkan, kali ini saya mengambil url video dari youtube.
Cara yang di pakai untuk membuat video carousel sebenarnya sama saja dengan membuat image carousel, hanya saja perbedaan nya ada pada penggunaan iframe (untuk video) dan img (untuk gambar). Berikut cara penggunakan Carousel nya
<iframe width="100%"
ng-src="https://www.youtube.com/embed/RvIZGBUnLs8" frameborder="0" allowfullscreen>
</iframe>
Cara yang di pakai untuk membuat video carousel sebenarnya sama saja dengan membuat image carousel, hanya saja perbedaan nya ada pada penggunaan iframe (untuk video) dan img (untuk gambar). Berikut cara penggunakan Carousel nya
Pada code di atas, tertera carousel-indicator yang di dalam nya terdapat data target. Data target ini menunjukkan urutan index dari video yang pertama kali muncul yang di tandai dengan class "active".
Carousel juga dapat di atur secara manual (tidak otomatis menjalankan slide) yaitu dengan pengaturan yang ada di "left corusel-control" dan "right carousel-control", sehingga kita dapat mengganti slide secara manual.
Dan hasilnya pun seperti ini,
Demikianlah cara penggunakan carousel untuk video menggunakan angularjs. Ternyata mudah, hanya mengganti cara menampilkan gambar nya saja. Semoga bermanfaat.
No comments:
Post a Comment