Beberapa Slideshow Korsel Bootstrap

Bagaimana cara menambahkan slider Multiple Bootstrap Carousel Slideshow pada satu halaman atau satu halaman?

Dalam tutorial ini, kami menyediakan contoh kode sumber yang berfungsi. Pertama, unduh kode sampel menggunakan tombol Unduh Kode di bagian bawah halaman.

Menambahkan dan membuat beberapa slider carousel bootstrap pada halaman sangat mudah dan sederhana.

Jadi, mari kita mulai dengan kode sampel.

Setelah pengunduhan kode sumber selesai, Anda akan mendapatkan file zip "multiple-bootstrap-carousels.zip". Ekstrak file zip di mana saja ke dalam sistem komputer lokal.

Setelah ekstraksi Anda menemukan direktori bernama "multiple-bootstrap-carousels", di direktori itu Anda akan mendapatkan aset berikut:

1. Direktori CSS
2. Direktori Font
3. Direktori Gambar
4. Direktori JS
5. Direktori CSS
6. File HTML – multiple-bootstrap-carousels.html

Apa saja pengesahan ini?

Aset ini diperlukan untuk membuat beberapa slider korsel bootstrap.

• Direktori CSS berisi file “bootstrap.min.css” yang digunakan untuk mendesain halaman HTML yang responsif.
• Direktori font digunakan oleh bootstrap CSS untuk menghasilkan berbagai ikon grafik yang dibangun. Kontrol navigasi panah slider carousel juga dihasilkan oleh ini. Anda dapat memeriksa di sini.
• Direktori gambar berisi semua gambar yang akan kita gunakan ke dalam slide slider carousel.
• Direktori JS berisi 2 file js “jquery.min.js” dan “bootstrap.min.js”. file jquery.min.js adalah perpustakaan JavaScript tujuan jquery menggunakan JavaScript di situs web. file bootstrap.min.js adalah file library bootstrap framework js yang digunakan untuk membuat carousel bootstrap, form model, tool-tips, tab dll. File bootstrap.min.js tergantung pada file jquery.min.js, Anda perlu memuat terlebih dahulu sebelum menggunakan bootstrap js. Anda dapat menjelajahi lebih lanjut tentang file library bootstrap js di sini.
• File HTML (multiple-bootstrap-carousels.html) berisi semua desain dan bagian kode dari beberapa penggeser korsel.

mari pelajari lebih lanjut tentang file multiple-bootstrap-carousels.html.

Anda harus membuka file HTML ke editor kode apa pun. Jika Anda tidak menginstal alat editor kode di komputer, maka di sini beberapa alat editor kode berbayar, unduh dan instal alat editor kode apa pun:

Di bagian Head kami telah memuat semua file CSS & js yang diperlukan dan empat kode JS carousel seperti di bawah ini:

Kode

 <kepala>
 <title>Contoh Slideshow Carousel Beberapa Bootstrap</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- bootstrap css library -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- jQuery library terbaru (muat library ini terlebih dahulu) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- bootstrap js library -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- carousel menyesuaikan kode css -->
 <gaya>
 .korsel {
 /* Anda dapat menambahkan kustomisasi css di sini seperti lebar tinggi slider */
 }
 </ gaya>
 
 <!-- kode js carousel -->
 <skrip>

 /*slideshow carousel pertama */
 $('#carousel-1').carousel({
      // Jumlah waktu tunda antara perosotan bersepeda, Jika salah, tidak ada siklus
      selang waktu: 500,

      // Menjeda slide pada mouse masuk dan melanjutkan pada mouseleave.
      jeda: "arahkan",

      // Apakah carousel harus berputar terus menerus atau berhenti mendadak.
      bungkus: benar,

      // Apakah carousel harus bereaksi terhadap kejadian keyboard.
      keyboard: benar
 });
 
 
 /*slideshow carousel kedua */
 $('#carousel-2').carousel({
      selang waktu: 1000,
      bungkus: benar,
      keyboard: benar
 });
 
 
 /*slideshow carousel ketiga */
 $('#carousel-3').carousel({
     selang waktu: 2000,
     bungkus: benar,
     keyboard: benar
 });
 
 
 /*slideshow carousel maju */
 $('#carousel-4').carousel({
     selang waktu: 3000,
     bungkus: benar,
     keyboard: benar
 });
 </skrip>
 </head>

Di bagian Body, kita mendefinisikan dua kode HTML carousel. Sekarang, jelaskan cara kerja kode slider pertama. Kami telah membagi div kelas baris menjadi dua kolom menggunakan kelas col-md-6. Dan ke kolom pertama, kami menambahkan kode HTML slider korsel pertama sama seperti di bawah ini.

 <div class="baris">
 <!-------------- kolom pertama dimulai -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Korsel Satu</h3></center>
   <!-------------- Slideshow carousel pertama dimulai -------------->
   <div class="carousel slide" data-ride="carousel">
   <!-- slide peluru -->
   <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- pembungkus untuk slide -->
   <div class="carousel-inner" role="listbox">
    
    <!-- slide 1 -->
    <div class="item aktif">
     <img src="gambar/gadis-1.jpg" alt="Chania">
    </div>
 
    <!-- slide 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="Chania">
    </div>
 
    <!-- slide 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="Bunga">
    </div>

   </div>

   <!-- panah kontrol slide kiri dan kanan -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Sebelumnya</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Berikutnya</span>
   </a>
  </div>
  <!-------------- Slide show carousel pertama berakhir -------------->
  </div>
 </div>
 <!-------------- akhir kolom pertama -------------->
</baris>

Ada tiga bagian penggeser korsel ke dalam kode HTML di atas

• Peluru Penggeser
• Slide Gambar
• Navigasi Penggeser

Bagian Slider Bullets dibuat menggunakan tag daftar pesanan HTML. <ol> menggunakan kelas bernama carousel-indicators , yang didefinisikan ke dalam file CSS bootstrap. Dan setiap tag <li> memiliki atribut data-target=”#carousel-1″ dimana #carousel-1 adalah ID yang sama yang kita gunakan pada kode js carousel pertama menjadi kode contoh.

Gambar Slider Bagian Slide memiliki div dengan item kelas. Di setiap div ini, kami telah menambahkan tag gambar untuk memuat gambar slide.

Navigasi Slider digunakan untuk menavigasi gambar slide ke kiri atau ke kanan. Panah navigasi dibuat oleh ikon grafis bootstrap yang disebut Glyphicon . Tombol navigasi dibungkus ke dalam tag <a> jangkar dengan fungsi atribut data korsel bootstrap dan dengan kelas kendali korsel . Ke dalam tag <a> ke dalam atribut href , kami telah menambahkan ID yang sama ( #carousel-1 ) seperti yang kami tambahkan sebelumnya ke bagian pelurus slider. ID ini digunakan dalam kode js slideshow carousel pertama untuk mengaktifkan fungsionalitas slider pertama menjadi kode HTML slider pertama.

Ke dalam kode penggeser kedua, kami telah menetapkan ID lain #carousel-2 untuk ketiga bagian kode penggeser seperti kode js penggeser kedua, peluru penggeser kedua, dan kode HTML navigasi.

Harapan! kalian menemukan tutorial & kode contoh deskriptif dan berfungsi untuk Anda. Kami telah mengomentari setiap bagian kode ke dalam contoh, sehingga Anda dapat dengan mudah memahami setiap kode.

Teman-teman jika Anda memiliki saran tentang bahasa tutorial & kode contoh yang dapat diunduh, silakan tulis kepada kami di email kami. Alamat email kami adalah awordpresslife{at}gmail{dot}com

Terima kasih telah membaca, menggunakan, dan mendukung tutorial ini.

Temukan tautan Referensi Berguna di bawah ini yang kami cari untuk menulis tutorial ini untuk Anda: