Cara menggunakan carousel bootstrap 5

Bootstrap 4 crousel – Kembali lagi di kodekreasi.com , pada artikel kali ini kita akan membahas tentang cara membuat slider dengan framework css yang cukup populer yaitu bootstrap. Untuk versi bootstrap yang akan kita gunakan pada tutorial ini adalah bootstrap versi 4 dimana bootstrap versi ini merupakan versi terbaru pada saat admin menuliskan artikel ini. Untuk membuat carousel atau yang sering disebut dengan slider pada bootstrap cukuplah mudah karena di website resminya bootstrap sendiri dokumentasi mengenai carousel atau slider ini sudah cukup lengkap , kalian dapat mengeksplor lebih jauh mengenai slider ini pada link .

Untuk membuat carousel responsive dengan menggunakan bootstrap tentu kita akan membutukan beberapa gambar atau image. Namun kalian tidak perlu kuatir karena pada tutorial ini kita akan menggunakan image static dari image generator online jadi yang hanya kalian perlukan adalah memastikan jika komputer kalian terhubung dengan jaringan internet.

Membuat Slider dengan Bootstrap 4

Oke tidak perlu berlama-lama lagi langsung saja menuju ke proses coding nya .Buka text editor kesayangan kalian kemudian buat sebuah folder baru. Didalam folder baru yang telah kalian buat tambahkan sebuah file dengan nama index.php kemudian copykan scribt program berikut ini :

<!DOCTYPE html>
<html>
<head>
	<title>Kodekreasi.com : Membuat Slider dengan Bootstrap 4</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- Costum CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="text-center mb-4 mt-4">
            <h2>KodeKreasi :contoh slider</h2>
        </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="https://picsum.photos/id/0/1080/500" alt="First slide">
                    
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://picsum.photos/id/1/1080/500" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://picsum.photos/id/2/1080/500" alt="Third slide">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <div class="nav-icon">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </div>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <div class="nav-icon">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </div>
            </a>
        </div>
    </div>
</body>

Selanjut nya kita akan mencoba mempercantik tampilan slider diatas menggunakan css tambahan sehingga kelihatan menarik. Tambahkan sebuah file baru dengan nama style.css di folder yang telah kalian buat tadi kemudian copykan scribt berikut ini :

.carousel-item img{
    opacity: 0.6;
}
.nav-icon{
    background: #1b1b1b;
    width: 3.8rem;
    height:  3.8rem;
    border-radius: 50%;
    border: 0;
    opacity: 0.7;
    text-shadow: none;
    color: #fff;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-icon:hover{
    background-color:  #000;
    opacity: 1.0;
    transition: all ease 0.3s;
    color: #fff;
}
.carousel-indicators li{
    border-radius: 50%;
    width: .8rem;
    height:  .8rem;
    background: transparent;
    border: solid 2px  #1b1b1b;
}

Berikut ini adalah hasil dari scribt program diatas setelah dijalankan :