Skip to content Skip to sidebar Skip to footer

Slider foto bootstrap



Langkah untuk membuat slider img atau gambar dengan bootstrap 


1. buat postingan baru
2 copykan kode dibawah ini
3 pastikan mode html
slider img atau gambar dengan bootstrap
slider img atau gambar dengan bootstrap

untuk demo klik disini

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ690_NZ45it-BNApzD80bbiA_bD6PjCzVMbqIbxqbS0_8wrQRsRbH_Pxy_p5XEfAS_H8aAo7YE4-YTRQl-ngjq2zf3AAKRckTKqWqcrMfgZCSG4jPxDvhNGg5YrZ3C9L3YEUhaX1neNc/s1600/Copy+of+oke.jpg" class="d-block w-100" alt="gambar">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOAzmk4fCLbEiuMdVL5tkdS5be7RAXm1s-maDwhro9rg226mRkvGwPQLhuSofOEuUNCB2M_fJuKHNTSb4GJKNCiQNiO_HZWKtBU1RMgs-lBimjYdbSQiZyJqmKDVr6bptE415bpRyVxG4/s1600/Copy+of+hbs+tarik+tambang.jpg" class="d-block w-100" alt="gambar">
    </div>
    <div class="carousel-item">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHJ3dpZDNQOgOkmfbm65StZgY0lhHRf5_AHFrQUzLBhehWcAqf24-0O5WEzX35vr_UrTbD2eajCtLfr1_cq-eD9zGEbRHXoh0rkxyn0Z9EUMqzYFGRbvkdtdy_ETTbqb8Pxx4q50KCOMU/s1600/S2020191.JPG" class="d-block w-100" alt="gambar">
    </div>
    <div class="carousel-item">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMdH0IqRlonWiR-aqnKqO4jyqu_1JhCdNHAY0Km0aL9ESVi-MYDczlfBCg4syzbsK2KxbMJdKL82cVJ3Xsp__HZgxXu3GgbYSVP96giISQbdsyro_a-wj4pUOnNrQLRwcIDmNAMTvARA/s1600/OKE4.jpg" class="d-block w-100" alt="gambar">
    </div>
    <div class="carousel-item">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMNEgdQag96LoWn1diGwssh-zgVyk01dLm4aoKzvoz4_Gm3yXwoIeO7WB3-9ITTgDyDIYo21CpMli3Hw-QkH-urEt1m1H21csc-XnBLFgp6h5boGOpdTNEvZR1N5VYCb2HZAzIpWbN6fs/s1600/oke7.jpg" class="d-block w-100" alt="gambar">
    </div>
    <div class="carousel-item">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjajWdOd7mYFiLC2j_1by2RgaLGfYx_pOU9uxLU6oonBJWuhH_yQ_EcMaGs4FXwYmxscZg3gav56cS48p-eVi3gpGAG-0YtngBW9JodRonRwULs0jN9zsCE38Ph6CuLeFt66JpJnGxNLHQ/s1600/wasotoe+%252835%2529.JPG" class="d-block w-100" alt="gambar">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Post a Comment for "Slider foto bootstrap"