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 |
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"
Berkomentarlah dengan baik, Kepribadian seseorang tercermin dari cara ia berkomentar. Terimakasih