Cara Pasang Slider di Bootstrap 4
halo teman teman jumpa kembali di kursuswebsite.org, kali ini saya akan menshare bagaimana Cara Pasang Slider di Bootstrap 4, seketika saja kita praktekan…
sebelum nya kalian siapkan gambar bagi slidernya yah jangan lupa..
lalu setelah itu kalian dapat ketikan kode di bawah ini, dan simpan dengan nama index.html.
<!doctype html>
<html lang=en>
<head>
<!-- Required meta tags -->
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1, shrink-to-fit=no>
<!-- Bootstrap CSS -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css integrity=sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy crossorigin=anonymous>
<title>Slider Bootstrap 4</title>
</head>
<body>
<div class=container>
<div class=row>
<div class=col-12>
<h1 class=text-center text-info>SLIDER BOOTSTRAP 4</h1>
</div>
<div id=carouselExampleIndicators class=carousel slide data-ride=carousel>
<ol class=carousel-indicators>
<li data-target=#carouselExampleIndicators data-slide-to=0 class=active></li>
<li data-target=#carouselExampleIndicators data-slide-to=1></li>
<li data-target=#carouselExampleIndicators data-slide-to=2></li>
</ol>
<div class=carousel-inner>
<div class=carousel-item active>
<img class=d-block w-100 src=1.jpg alt=halo teman teman jumpa kembali di kursuswebsite Cara Pasang Slider di Bootstrap 4>
<div class=carousel-caption d-none d-md-block>
<h3>Slider Satu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos tenetur illo sint quasi voluptatibus mollitia in harum ut officiis, natus voluptate quam distinctio nostrum doloremque incidunt recusandae, ducimus, id nobis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quo, nobis totam cum necessitatibus cumque ullam repellendus, nostrum sit omnis saepe maiores harum similique vero debitis, deleniti molestias repellat voluptate.</p>
</div>
</div>
<div class=carousel-item>
<img class=d-block w-100 src=2.jpg alt=halo teman teman jumpa kembali di kursuswebsite Cara Pasang Slider di Bootstrap 4>
<div class=carousel-caption d-none d-md-block>
<h3>Slider Dua</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore aliquam rerum vero eos nemo nam ducimus porro labore itaque repellendus, minus voluptatum, quas in corporis assumenda. Quaerat corporis qui earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, non voluptates, nam doloremque magnam tempore suscipit magni, dignissimos, corporis id ea dolorum aspernatur exercitationem eos iusto quo molestiae qui aut?</p>
</div>
</div>
<div class=carousel-item>
<img class=d-block w-100 src=3.jpg alt=halo teman teman jumpa kembali di kursuswebsite Cara Pasang Slider di Bootstrap 4>
<div class=carousel-caption d-none d-md-block>
<h3>Slider Tiga</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem fugit atque dolorum porro consectetur odio veniam, eligendi natus corporis voluptate ducimus cum, numquam nemo dolores iusto accusamus, facere, explicabo sit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat molestias, ratione laborum itaque quia possimus, nobis quae debitis accusantium sunt provident sapiente voluptatem fugiat inventore! Ratione voluptatibus id obcaecati eligendi?</p>
</div>
</div>
</div>
<a class=carousel-control-prev href=#carouselExampleIndicators 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=#carouselExampleIndicators role=button data-slide=next>
<span class=carousel-control-next-icon aria-hidden=true></span>
<span class=sr-only>Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
setelah tag penutup div terakhir ketikan kode javascript berikut.
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js” integrity=”sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4″ crossorigin=”anonymous”></script>
gampang bukan, tapi jgn lupa masukan gambarnya yah di tag img di atas, sesuai dengan gambar yang kalian pasang sendiri, bila berhasil karenanya hasilnya akan seperti gambar di bawah ini.
Sumber https://kursuswebsite.org
