Membuat Tampilan Slide Bootstrap Carousel Drupal Jadi Full Slider
Bootstrap Carousel merupakan salah satu fitur yang terdapat dalam module Views Bootstrap, Saya sudah membahas tentang bagimana cara membuat slider menggunakan Bootstrap carousel, Anda bisa membacanya pada artikel Membuat Slider Gambar Yang Mengarah ke Artikel di Drupal
Dulu Saya sedikit kesulitan untuk membuat tampilan slide jadi full kesamping, maksudnya menyatu kesamping ke layar pengguna, karena Saya sendiri memang tidak begitu ahli dan paham semuanya, dan karena memang tidak basic dalam hal tersebut proses themingnya pun Saya lakukan sesuka hati saja,,heheh
Untuk membuat Bootstrap Carousel menjadi full slider kesamping maka kita perlu membuat region atau penempatan block baru di drupal sehingga nantinya block tersebut akan digunakan khusus untuk menaruh slider. Kemudian nanti kita panggil class footer, kenapa tidak buat properti css baru saja ? Saya tidak bisa dan tidak mengerti cara buatnya makanya, Saya manfaatkan class yang sudah ada saja.
Berikut ini adalah langkah – langkah untuk Membuat Tampilan Slide Bootstrap Carousel Drupal Jadi Full Slider :
Untuk membuat Bootstrap Carousel menjadi full slider kesamping maka kita perlu membuat region atau penempatan block baru di drupal sehingga nantinya block tersebut akan digunakan khusus untuk menaruh slider. Kemudian nanti kita panggil class footer, kenapa tidak buat properti css baru saja ? Saya tidak bisa dan tidak mengerti cara buatnya makanya, Saya manfaatkan class yang sudah ada saja.
Berikut ini adalah langkah – langkah untuk Membuat Tampilan Slide Bootstrap Carousel Drupal Jadi Full Slider :
- Buat Region Baru
-
Buka folder template Bootstrap kemudian pada info file template Bootstrapnya Anda tambahkan baris berikut regions[slideshow] = 'Slideshow' seperti yang terlihat pada gambar dibawah ini
- Setelah itu kita tampilkan regions atau block yang sudah dibuat tersebut pada halaman page.tpl.php
-
Buka file page.tpl.php lalu tepat dibawah header tambahkan script berikut <!-- /#slide custom -->
<div class="footer">
<?php if (!empty($page['slideshow'])): ?> <section id="slideshow"> <?php print render($page['slideshow']); ?> </section></div>
<?php endif; ?>
-
Sampai disini nanti akan terlihat region baru pada block template seperti yang terlihat pada gambar dibawah ini
- Tampilan diatas memang terlihat menyatu dengan navigasi, itu dikarenakan Saya melakukan custom pada css sehingga tidak ada jarak navigasi dengan blocknya
- Buatlah sebuah image style baru dengan efek resize & crop dengan ukuran 1007 x 500. Ukuran tersebut nantinya bisa Anda gunakan pada FIELD untuk image module views bootstrap carouselUntuk membuatnya Anda bisa melihat artikel Create New Image Style In Drupal
-
Selanjutnya Anda bisa membuat slider baru dengan ukuran dan menempatkannya pada block slider sehingga hasilnya akan terlihat seperti gambar dibawah ini
Lihat Demo di : punyaahmad-z[dot]netau[dot]net
Sementara itu untuk mengatur jarak dengan navigasi Anda membuat custom css sendiri yang dimasukan pada file style.css . Bila tampilan carousel kurang responsif, Anda bisa membaca artikel tentang Mengatasi Carousel Module Views Bootstrap yang Kurang Responsif
Ahmad Zaelani
Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple
pantesan sebelum tak menggunakan trik diatas ini, tampilan slidernya nggak full banget sliderannya, tapi setelah pake trik diatas maka Tampilan Slide Bootstrap Carousel Drupal Jadi Full Slider deh tuh...liat ajah deh gih
ReplyDeleteDrupal nampaknya sedang naik daun nih sekarang..ya kan Mas Zae..hahahayyy
ReplyDeletekalau kita naik apa yaa... hehe..
DeleteTampilan Full Slidder memang tampak lebih menarik ya kang.. hanya saja saya tidak ahli dalam modul carousel droupal, jadi hanya bisa melongo saja, hehe..
ReplyDeletebenar deh kang zaelani mulai jadi master of template, kang ditunggu karyanya ya kang, yang keren dan gratisan hehehe. tapi jujur saya sendiri kurang ngeh kalau blog pakai Bootstrap Carousel menjadi full slider, karena terkesan akan memperlambat loading betul kang?
ReplyDeleteini nih yang sedang saya cari efek crousel biar bisa jadi full slider kayak seperti itu, tapi saya pengen ada titlenya dibagian bawah image
ReplyDelete