Mengatasi Module Views Bootstrap Carousel Yang Tidak Jalan Secara Otomatis

Bootstrap Carousel merupakan salah satu paket dari module view Bootstrap yang bekerja pada sistem Drupal yang sering dimanfaatkan untuk keperluan membuat slider, Saya sudah membahas tentang bagaimana membuat slider menggunakan carousel pada artikel Membuat Slider Gambar Yang Mengarah ke Artikel di Drupal. Dalam Module Views Bootstrap tersebut tersedia diantaranya

1. Bootstrap accordion
2. Bootstrap Carousel
3. Bootstrap Grid
4. Bootstrap List Group
5. Bootstrap Media Object
6. Bootsrap Tab
7. Bootstrap Table
8. Boostrap Thumbnail

Versi module view bootsrap sebelumnya 7.x-3.x-dev sebenarnya ada yang bermasalah khusunya ketika Saya mencoba untuk menggunakan Bootstrap Media Object dimana preview gambarnya tidak tampil. Melihat hal tersebut akhirnya Saya mencoba versi 7.x-3.1 yang dimana tidak lagi ditemukan masalah pada Bootsrap Media Object.

Namun beberapa hari setelah apa yang Saya kerjakan selesai ternyata Saya merasa ada sedikit kejanggalan pada Bootstrap carousel dimana slider tidak jalan secara otomatis ketika web load pertama kali, harus di klik terlebih dahulu baru bisa jalan slidenya. Menurut Saya ini bermasalah mengingat pada versi dev-nya Bootstrap carousel berjalan dengan baik, maksudnya ketika web load pertama kali, slide berjalan tanpa harus di klik terelebih dahulu bagian navigasinya.

Dalam beberapa jam Saya mengalami kebingungan, Saya bandingkan script antara Bootstrap Carousel 7.x-3.x-dev dan 7.x-3.1 (versi yang saya gunakan). Setelah dibandingkan memang ada perbedaan, tidak banyak hanya 3 baris script saja. Perhatikan sususnan script Bootstrap Carousel dibawah ini

Bootstrap Carousel 7.x-3.x-dev

<?php if (!empty($title)): ?>
  <h3><?php print $title ?></h3>
<?php endif ?>

<div id="views-bootstrap-carousel-<?php print $id ?>" class="<?php print $classes ?>" <?php print $attributes ?>>
  <?php if ($indicators): ?>
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <?php foreach ($rows as $key => $value): ?>
        <li data-target="#views-bootstrap-carousel-<?php print $id ?>" data-slide-to="<?php print $key ?>" class="<?php if ($key == $first_key) print 'active' ?>"></li>
      <?php endforeach ?>
    </ol>
  <?php endif ?>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <?php foreach ($rows as $key => $row): ?>
      <div class="item <?php if ($key == $first_key) print 'active' ?>">
        <?php print $row ?>
      </div>
    <?php endforeach ?>
  </div>

  <?php if ($navigation): ?>
    <!-- Carousel navigation -->
    <a class="carousel-control left" href="#views-bootstrap-carousel-<?php print $id ?>" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="carousel-control right" href="#views-bootstrap-carousel-<?php print $id ?>" data-slide="next">
      <span class="icon-next"></span>
    </a>
  <?php endif ?>
</div>

Bila script diatas di inspect elemen maka akan terlihat seperti gambar dibawah ini, Disana juga terlihat sebuah blok hitam dengan bertuliskan ‘ev’

 Selanjutnya perhatikan susunan  script bootstrap carousel versi 7.x-3.1  dibawah ini

<div id="views-bootstrap-carousel-<?php print $id ?>" class="<?php print $classes ?>" <?php print $attributes ?>>
  <?php if ($indicators): ?>
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <?php foreach ($rows as $key => $value): ?>
        <li data-target="#views-bootstrap-carousel-<?php print $id ?>" data-slide-to="<?php print $key ?>" class="<?php if ($key === 0) print 'active' ?>"></li>
      <?php endforeach ?>
    </ol>
  <?php endif ?>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <?php foreach ($rows as $key => $row): ?>
      <div class="item <?php if ($key === 0) print 'active' ?>">
        <?php print $row ?>
      </div>
    <?php endforeach ?>
  </div>

  <?php if ($navigation): ?>
    <!-- Carousel navigation -->
    <a class="carousel-control left" href="#views-bootstrap-carousel-<?php print $id ?>" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="carousel-control right" href="#views-bootstrap-carousel-<?php print $id ?>" data-slide="next">
      <span class="icon-next"></span>
    </a>
  <?php endif ?>
</div>

Bila script diatas di inspek elemen maka hasilnya akan terlihat seperti gambar dibawah ini

 Dari hasil perbandingan inspek elemen kedua script diatas sudah terlihat ada perbedaanya, dimana script pertama ketika di load langsung menampilkan blok hitam bertuliskan “ev” sedangkan script kedua tidak, script yang kedua akan memunculkan “ev” ketika navigasi pinggir bagian slide di klik.

Beberapa jam berlalu dan Sayapun masih kebingungan, Saya sudah menyamakan script carousel yang Saya gunakan dengan script carousel versi dev yang jalan, namun yang terjadi malah error mengingat versi keduanya memang berbeda.

Beberapa jam berlalu hingga akhirnya Saya menyadari letak perbedaan keduanya terdapat pada script data-ride="carousel" dimana pada versi carousel yang berjalan baris tersebut terlihat ketika web diload pertama kali, namun pada script tidak terlihat ada penambahan script tersebut, karena mungkin sepertinya itu tersimpan pada variabel PHP $attributes

$attributes versi terbaru carousel yang Saya gunakan sepertinya tidak langsung mencetak data-ride="carousel" , bahkan ketika di klik navigasi (kanan kiri gambar)  dan slide berjalan, script tidak menunjukan baris data-ride="carousel" . Saya kurang mengerti mengapa hal tersebut bisa terjadi, tapi gara – gara hal tersebut, Saya sedikit dibuat kerepotan apalagi sebenarnya Saya masih dalam tahap belajar.

Jadi sekarang sudah jelas, berarti sebenarnya yang Saya perlukan hanya data-ride="carousel" dimana Saya harus meletakannya pada tag div baris pertama script. Dimana yang tadinya baris pertama script terlihat seperti dibawah ini 

<div id="views-bootstrap-carousel-<?php print $id ?>" class="<?php print $classes ?>" <?php print $attributes ?>>

Maka supaya slide carousel dapat berjalan saat pertama kali web load (selesai load) Saya harus merubah/menambah scriptnya menjad seperti ini

<div data-ride=”carousel” id="views-bootstrap-carousel-<?php print $id ?>" class="<?php print $classes ?>" <?php print $attributes ?>>

Bila Anda mengalami masalah seperti yang Saya alami diatas, mungkin cara yang Saya paparkan diatas bisa sedikit membantu. Semua cara – cara untuk mengatasi bootstrap carousel yang tidak berjalan otomatis tersebut merupakan pengalaman saja, dimana proses penyelesaian masalahnya adalah dengan melakukan perbandingan antara script carousel yang berjalan dengan baik dan yang tidak, dan Saya harap cara diatas dapat membantu menyelesaikan masalah Anda.

PLEASE SHARE

Share it Share it Tweet Share it Pin it

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