Some text some message..
Some text some message..
Some text some message..
Some text some message..

Silahkan atau queue Daftar disini.

Carousel Bootsrap Tidak Bisa Sliding

Andre Isnawan

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 : tag iconhtml tag iconjavascript tag iconbootstrap

  

facebooktwitterwhatapplinkedinpinterest

comment1 Jawaban, 148 view

Richard Aja

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

Andre Isnawan

04 Jun 2022, 20:31:20

Bang #richard, interval itu satuannya dalam milli second ya?

Richard Aja

Richard Aja

04 Jun 2022, 20:38:16

yup benar sekali.

Andre Isnawan

Andre Isnawan

04 Jun 2022, 20:39:28

ok.. terima kasih banyak

Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.

Silahkan atau queue Daftar disini.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.