Skip to content Skip to sidebar Skip to footer

Mengatasi Module Views Bootstrap Carousel Yang Tidak Jalan Secara Otomatis

Bootstrap Carousel ialah salah satu paket dari module view Bootstrap yang bekerja pada sistem Drupal yang sering dimanfaatkan untuk keperluan membuat slider, Saya sudah mengulas wacana bagaimana membuat slider memakai 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 bekerjsama ada yang bermasalah khusunya ketika Saya mencoba untuk memakai Bootstrap Media Object dimana preview gambarnya tidak tampil. Melihat hal tersebut hasilnya Saya mencoba versi 7.x-3.1 yang dimana tidak lagi ditemukan persoalan pada Bootsrap Media Object.

Namun beberapa hari sehabis 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 lampau gres sanggup 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 lampau bab 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). Sesudah dibandingkan memang ada perbedaan, tidak banyak spesialuntuk 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 ibarat gambar dibawah ini, Disana juga terlihat sebuah blok hitam dengan bertuliskan ‘ev’

Bootstrap Carousel ialah salah satu paket dari module  view Bootstrap yang bekerja pad Mengatasi Module Views Bootstrap Carousel Yang Tidak Jalan Secara Otomatis

 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 ibarat gambar dibawah ini

Bootstrap Carousel ialah salah satu paket dari module  view Bootstrap yang bekerja pad Mengatasi Module Views Bootstrap Carousel Yang Tidak Jalan Secara Otomatis


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

Beberapa jam silam 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 tidak sama.

Beberapa jam silam sampai hasilnya 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, alasannya mungkin tampaknya itu tersimpan pada variabel PHP $attributes

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

Jadi kini sudah jelas, berarti bekerjsama yang Saya perlukan spesialuntuk data-ride="carousel" dimana Saya harus meletakannya pada tag div baris pertama script. Dimana yang tadinya baris pertama script terlihat ibarat dibawah ini 


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

Maka biar slide carousel sanggup berjalan ketika pertama kali web load (selesai load) Saya harus merubah/menambah scriptnya menjad ibarat ini

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

Bila Anda mengalami persoalan ibarat yang Saya alami diatas, mungkin cara yang Saya paparkan diatas sanggup sedikit memmenolong. Semua cara – cara untuk mengatasi bootstrap carousel yang tidak berjalan otomatis tersebut ialah pengalaman saja, dimana proses penyelesaian masalahnya yaitu dengan melaksanakan perbandingan antara script carousel yang berjalan dengan baik dan yang tidak, dan Saya harap cara diatas sanggup memmenolong menuntaskan persoalan Anda.

Post a Comment for "Mengatasi Module Views Bootstrap Carousel Yang Tidak Jalan Secara Otomatis"