Andre Isnawan
04 Jun 2022, 20:03:29
Saya menggunakan carousel pada bootstrap untuk menampilan beberapa buah gambar agar tampilannya ada efek sliding. Namun ada masalah saat halaman dijalankan. Gambar memang bisa sliding normal, tapi harus diklik terlebih tanda panah ke kanan dan juga panah ke kiri.
Apakah ada alternatif lainya misalnya agar saat halaman dibuka pertama kali, efek sliding bisa langsung diterapkan. Dan bagaimanakah agar waktu sliding untuk gambar yang kedua dan seterusnya bisa agak lama (7 detik), karena normal pergantian slide terlalu cepat sekitar 2 detik?
<div id="mycarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"><a href="" target="_blank" rel="nofollow"><img class="img_ads" src="img1.png" alt="" /></a></div> <div class="item"><a href="#" target="_blank" rel="nofollow"><img class="img_ads" src="img2.png" alt="" /></a></div> <div class="item"><a href="#" target="_blank" rel="nofollow"><img class="img_ads" src="img3.png" alt="" /></a></div> <div class="item"><a href="#" target="_blank" rel="nofollow"><img class="img_ads" src="img4.png" alt="" /></a></div> <div class="item"><a href="#" target="_blank" rel="nofollow"><img class="img_ads" src="img5.png" alt="" /></a></div> </div> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
Tags : 
html javascript bootstrap
1 Jawaban, 663 view
Apakah ingin menghapus konten ini?
Apakah ingin menghapus komentar ini?
Paling Banyak Dibaca Pada Forum
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Richard Aja
04 Jun 2022, 20:25:48
Agar sliding pada carousel dapat berjalan normal, pastikan bootstrap.js nya sudah ditambahkan. Letakkan pada bagaian akhir halaman agar dapat diload lebih optimal. Carousel pada bootstrap memang ada sedikit kelemahan, yaitu efek slide akan terpicu saat tombol prev slide atau next slide di klik.
Untuk mengatasinya dapat menggunakan bantuan jquery. Dan untuk memberi jeda sliding berikutnya dapat menetapkan waktu interval 7 detik (7000). Semoga membantu.
<script src="scripts/jquery.js"></script> <link href="bootstrap.min.css" rel="stylesheet"> <!-- tempatkan carousel disini --> <!-- tempatkan carousel disini --> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $('.carousel').carousel({ interval: 3000 }); }); </script> <script src="scripts/bootstrap.min.js"></script>Andre Isnawan
04 Jun 2022, 20:31:20
Bang #richard, interval itu satuannya dalam milli second ya?
Richard Aja
04 Jun 2022, 20:38:16
yup benar sekali.
Andre Isnawan
04 Jun 2022, 20:39:28
ok.. terima kasih banyak