Membuat Slider atau Carousel dengan Bootstrap 4

2 min read

cara membuat slider dengan bootstrap

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 berikut ini.

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 :

Membuat Slider dengan Bootstrap 4
Contoh Slider dengan Bootstrap 4

Jika kalian ingin mencobanya secara online kalian dapat mencobanya melalui editor online berikut ini :

See the Pen slider by firman196 (@firman196) on CodePen.

Sekian artikel saya kali ini mengenai Membuat Carousel dengan Bootstrap 4 , jangan lupa baca artikel saya yang lain.

Baca Juga : Cara Membuat Background Html Full Screen

Incoming Search Terms :

  • membuat slide menu dengan bootstrap
  • membuat slider di codeigniter
  • membuat slider dari database
  • membuat carousel bootstrap dinamis
  • cara membuat carousel responsive
  • cara membuat slider carousel otomatis
  • membuat carousel bootstrap 4
  • cara membuat slideshow di php
  • bootstrap 4 crousel

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *