Custom Carousel Bootstrap

halo teman teman, selamat datang di panduan pemrogramman web Source Code Aplikasi, kali ini kita akan belajar merancang Modifikasi Carousel Bootstrap, seketika saja kita praktekan yah teman teman.





Di panduan kali ini kita akan belajar bagaimana merubah tampilan crousel boostrap yang secara default tampilannya seperti ini.



selamat



kita akan ubah menjadi seperti berikut teman teman



selamat



dimana tombol prev dan next akan berada di bagian kiri atas dan indicator aktive nya akan lebih besar dan berwarna merah sesuai dengan perpindahan slide nya.



sebelum nya kita mesti merancang struktur mendasar html dan menghubungkannya dengan bootstrap 4 yah teman teman. script nya seperti berikut.



<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css integrity=sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB crossorigin=anonymous>

    <title>Modifikasi Carousl Bootstrap</title>
  </head>
  <body>
    
  </body>
</html>


lalu setelah itu kita bikin class container dan slider nya yah teman teman. kode nya seperti berikut



<div class=container>
  <div class=row>
    <div class=col>
      <h2 class=text-center text-secondary>Modifikasi Carousel Bootstrap</h2>
      <div id=carouselExampleFade class=carousel slide carousel-fade data-ride=carousel>
        <ol class=carousel-indicators>
          <li data-target=#carouselExampleIndicators data-slide-to=0 class=active oke></li>
          <li data-target=#carouselExampleIndicators data-slide-to=1 class=oke></li>
          <li data-target=#carouselExampleIndicators data-slide-to=2 class=oke></li>
        </ol>
      <div class=carousel-inner>
        <div class=carousel-item active>
          <img src=https://fakeimg.pl/1200x500/FFC107,128/000,255//?text=Slide 1font=arial>
          <div class=carousel-caption d-none d-md-block>
            <h5 class=text-dark>Slide Satu</h5>
            <p class=text-dark>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
          </div>
        </div>
        <div class=carousel-item>
         <img src=https://fakeimg.pl/1200x500/009688,128/000,255/?text=Slide 2font=arial>
         <!-- <img src=https://fakeimg.pl/350x200/ff0000,128/000,255> -->
         <div class=carousel-caption d-none d-md-block>
            <h5 class=text-dark>Slide Dua</h5>
            <p class=text-dark>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamd</p>
          </div>
        </div>
        <div class=carousel-item>
          <img src=https://fakeimg.pl/1200x500/3498db,128/000,255//?text=Slide 3font=arial>
          <div class=carousel-caption d-none d-md-block>
            <h5 class=text-dark>Slide Tiga</h5>
            <p class=text-dark>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. </p>
          </div>
        </div>
      </div>
      
      <a class=carousel-control-prev href=#carouselExampleFade 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=#carouselExampleFade 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>
</div>


dan tampilan dari kode di atas seperti ini teman teman.



selamat



lalu setelah itu kita bikin kustom css nya, ketikan kode css berikut yah teman teman



.carousel-control-prev{
    position: absolute;
    top:10px;
    background: red;
    padding: 20px;
    width: 50px;
    height: 20px;

  }

  .carousel-control-next{
    position: absolute;
    top:10px;
    left:55px;
    background: red;
    padding: 20px;
    width: 50px;
    height: 20px;
  }

  .oke{
    padding: 10px;
    position: absolute;
    top: 10px;
  }
  .carousel-indicators .active{
    background: #e74c3c;
  }


oke setelah itu coba kita jalankan di webrowser dan hasilnya akan seperti berikut ini



selamat



gampang bukan teman teman. sekianlah panduan Modifikasi Carousel Bootstrap, semoga bermanfaat yah teman teman.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more