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.

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

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

Mengatasi Carousel Module Views Bootstrap yang Kurang Responsif

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

Post a Comment