Mengatasi Carousel Module Views Bootstrap Yang Kurang Responsif

Carousel biasanya dipakai untuk membuat tampilan slide dengan gambar, carousel ini ialah bab dari module views bootstrap yang Saya gunakan dalam projek menciptakan website bagus dengan drupal & bootstrap. Saat saya perhatikan Carousel Bootstrap yang saya gunakan di drupal ternyata kurang responsif, dalam ukuran tertentu misal 360px – 280px,  judul dan deskripsi yang terdapat pada carousel terlihat kurang responsif. Contonhnya menyerupai yang sanggup Anda lihat pada gambar dibawah ini

Untuk mengatasi problem tersebut, Anda sanggup bermain – main dengan media query untuk mengatur tampilan dari judul dan deskripsi Carousel biar sedikit responsif. Hal pertama yang perlu Anda lakukan yaitu membuat class yang nantinya ditempatkan pada bab Judul dan Deskripsi Carousel. 


Lihat juga :  

• Membuat Tampilan Slide Bootstrap Carousel Drupal Kaprikornus Full Slider
• Mengatasi Module Views Bootstrap Carousel Yang Tidak Jalan Secara Otomatis  
• Custom CSS Drupal Bootstrap Tidak Bekerja Di Layar Lain

 
#1 Menempatkan Class Baru Pada Carousel

Buka file views-bootstrap-carousel-plugin-rows.tpl.php  yang terdapat di sites/all/modules/views_bootstrap/templates/carousel, dan ganti scriptnya menjadi menyerupai diberikut :

<?php print $image ?>  <?php if (!empty($title) || !empty($description)): ?>   <div class="carousel-caption">     <?php if (!empty($title)): ?>      <div class="title-carousel-custom">        <?php print $title ?>       </div>     <?php endif ?>      <?php if (!empty($description)): ?>       <div class="deskripsi-carousel-custom ">       <?php print $description ?>       </div>     <?php endif ?>   </div> <?php endif ?> 

Title carousel custom menggantikan H3 <h3> dan deskripsi carousel costum menggantikan tag P <p> dengan begitu kita jadi lebih leluasa dalam mengatur judul dan deskripsi carousel yang berada dibawah class carousel-caption

#2 Menambahkan media query pada custom CSS
Selanjutnya Anda sanggup menambahkan media query pada custom CSS (style.css) menyerupai diberikut :

 /*Media Query Carousel Custom */ /*Media Query Carousel Custom title */ @media screen and (max-width: 1090px){ .title-carousel-custom{ font-size: 24px;}} @media screen and (max-width: 768px){ .title-carousel-custom{font-size: 24px;}}  @media screen and (max-width: 568px) { .title-carousel-custom { font-size: 20px;}  .deskripsi-carousel-custom {display: none;}}  @media screen and (max-width: 360px) {   .title-carousel-custom {font-size: 14px; }   .deskripsi-carousel-custom {display: none;}   .carousel-indicators{display: none} }   @media screen and (max-width: 280px) {   .title-carousel-custom {font-size: 14px; padding: 20px 0;}   .carousel-indicators{display: none  }   .carousel-control{display: none; }   .deskripsi-carousel-custom {display: none;}}   /*Media Query Carousel Custom deskripsi */   .deskripsi-carousel-custom  { font-size: 14px;}   

Terkhir Anda sanggup mengecek tampilan carosuselnya, jikalau berhasil nanti carousel dalam ukuran kecil akan tetap terlihat responsif, dan lebih baik dibandingkan carousel sebelumnya.

Silahkan atur sendiri untuk media querynya sesuai keinginan. Dalam tumpuan diatas Saya mengecilkan ukuran abjad dari judul carousel dan menghilangkan deskripsinya dikala ukuran layar berada di bawah 360px.

Video Membuat Tampilan Slide Bootstrap Carousel Lebih Responsive

Share :