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 :
  1. Buat Region Baru 
  2. Buka folder template Bootstrap kemudian pada info file template Bootstrapnya Anda tambahkan baris berikut  regions[slideshow]  = 'Slideshow' seperti yang terlihat pada gambar dibawah ini 
    membuat regions baru
  3. Setelah itu kita tampilkan regions atau block yang sudah dibuat  tersebut pada halaman page.tpl.php 
  4. 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; ?>

    menambahkan regions baru untuk slide
  5. Sampai disini nanti akan terlihat region baru pada block template seperti yang terlihat pada gambar dibawah ini
    berhasil membuat regions/block baru
     
  6. Tampilan diatas memang terlihat menyatu dengan navigasi, itu dikarenakan Saya melakukan custom pada css sehingga tidak ada jarak navigasi dengan blocknya 
  7. 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 
  8. Selanjutnya Anda bisa membuat slider baru dengan ukuran  dan menempatkannya pada block slider sehingga hasilnya akan terlihat seperti gambar dibawah ini

    full slider carousel bootstrap
    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

6 Responses to "Membuat Tampilan Slide Bootstrap Carousel Drupal Jadi Full Slider"

  1. 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

    ReplyDelete
  2. Drupal nampaknya sedang naik daun nih sekarang..ya kan Mas Zae..hahahayyy

    ReplyDelete
  3. Tampilan Full Slidder memang tampak lebih menarik ya kang.. hanya saja saya tidak ahli dalam modul carousel droupal, jadi hanya bisa melongo saja, hehe..

    ReplyDelete
  4. benar 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?

    ReplyDelete
  5. ini nih yang sedang saya cari efek crousel biar bisa jadi full slider kayak seperti itu, tapi saya pengen ada titlenya dibagian bawah image

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin