Mengatasi Carousel Module Views Bootstrap yang Kurang Responsif


Carousel biasanya digunakan untuk membuat tampilan slide dengan gambar, carousel ini merupakan bagian dari module views bootstrap yang Saya gunakan dalam projek membuat website cantik 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 seperti yang bisa Anda lihat pada gambar dibawah ini
tampilan bootstrap carousel kurang responsif



Untuk mengatasi masalah tersebut, Anda bisa bermain – main dengan media query untuk mengatur tampilan dari judul dan deskripsi Carousel supaya sedikit responsif. Hal pertama yang perlu Anda lakukan adalah membuat class yang nantinya ditempatkan pada bagian Judul dan Deskripsi Carousel. 



Lihat juga :  
 
#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 seperti berikut :


<?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 bisa menambahkan media query pada custom CSS (style.css) seperti berikut :



/*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 bisa mengecek tampilan carosuselnya, bila berhasil nanti carousel dalam ukuran kecil akan tetap terlihat responsif, dan lebih baik dibandingkan carousel sebelumnya.
carousel jadi lebih responsif


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


Video Membuat Tampilan Slide Bootstrap Carousel Lebih Responsive


0 Response to "Mengatasi Carousel Module Views Bootstrap yang Kurang Responsif"

Post a Comment

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin