Halo, ketemu lagi dengan saya, kali ini saya akan kasih tau kalian bagaimana Cara Membuat Slider Fade-in Dengan Bootstrap, kalo kalian tau cara membuat tampilan slider carousel dengan bootstrap pasti kalian akan dengan mudah membuat slider fade-in, tapi buat kalian yang masih bingung, berikut langkah-langkah untuk membuat slider fade-in.
Langsung saja buka file index bootstrap nya, kemudian tambahkan kode berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<html> <head> <meta charset="UTF-8" /> <title>Document</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div id="hero-wrapper"> <div class="carousel-wrapper"> <div id="hero-carousel" class="carousel slide carousel-fade"> <ol class="carousel-indicators"> <li data-target="#hero-carousel" data-slide-to="0" class="active"></li> <li data-target="#hero-carousel" data-slide-to="1"></li> <li data-target="#hero-carousel" data-slide-to="2"></li> <li data-target="#hero-carousel" data-slide-to="3"></li> <li data-target="#hero-carousel" data-slide-to="4"></li> <li data-target="#hero-carousel" data-slide-to="5"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://placekitten.com/1200/500"> </div> <div class="item"> <img src="http://placekitten.com/1170/500"> </div> <div class="item"> <img src="http://placekitten.com/1100/500"> </div> <div class="item"> <img src="http://placekitten.com/1170/600"> </div> <div class="item"> <img src="http://placekitten.com/1190/800"> </div> <div class="item"> <img src="http://placekitten.com/1200/800"> </div> </div> <a class="left carousel-control" href="#hero-carousel" data-slide="prev"> <i class="fa fa-chevron-left left"></i> </a> <a class="right carousel-control" href="#hero-carousel" data-slide="next"> <i class="fa fa-chevron-right right"></i> </a> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body> </html> |
Pada bagian img silahkan kalian isikan gambar sesuai keinginan dan di sesuaikan, setelah itu, lanjutkan untuk kode CSS berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
#hero-wrapper { height: 100%; width: 100%; position: fixed; } #hero-wrapper .carousel-wrapper, #hero-carousel { height: 100%; width: 100%; position: absolute; } #hero-carousel{ img { left: 0; bottom: 0; min-width: 100%; min-height: 100%; max-width: none; width: auto; height: auto; } & i { position: absolute; top: 50%; } } .carousel-fade { .carousel-inner { .item { opacity: 0; transition-property: opacity; } .active { opacity: 1; } .active.left, .active.right { left: 0; opacity: 0; z-index: 1; } .next.left, .prev.right { opacity: 1; } } .carousel-control { z-index: 2; } } |
Kalo sudah, tambah kode Javascript berikut.
1 2 3 4 |
$('.carousel').carousel({ interval: 3000, pause: false }) |
Kalo sudah semua, simpan terlebih dahulu kemudian jalankan dibrowser masing-masing.
Nah itulah Cara Membuat Slider Fade-in Dengan Bootstrap, semoga bermanfaat, amin.
Sampai ketemu dilain kesempatan dan selamat mencoba 🙂