halo teman teman jumpa kembali di kursuswebsite.org, kali ini saya akan menshare bagaimana Cara Pasang Slider di Bootstrap 4, langsung saja kita praktekan…
sebelum nya kalian siapkan gambar untuk slidernya yah jangan lupa..
lalu setelah itu kalian bisa 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="Test 1">
<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="Second slide">
<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="Third slide">
<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>
mudah bukan, tapi jgn lupa masukan gambarnya yah di tag img di atas, sesuai dengan gambar yang kalian pasang sendiri, bila berhasil maka hasilnya akan seperti gambar di bawah ini.
The post Cara Pasang Slider di Bootstrap 4 appeared first on Kursus Website Terbaik.