Karusel bootstrap skrin penuh dengan imej awal rawak

Artikel ini menunjukkan membina dua sambungan karusel bootstrap mudah: tayangan slaid skrin penuh dan karusel dengan slaid awal rawak. Kami akan bermula dengan karusel asas dan kemudian meningkatkannya.

Konsep Utama:

• Carousel skrin penuh: dicapai menggunakan jQuery tersuai untuk menyesuaikan ketinggian item karusel secara dinamik untuk memadankan ketinggian tingkap, dan menetapkan imej dan warna latar belakang. Kelas CSS "skrin penuh" mengendalikan gaya latar belakang.
• Slaid awal rawak: Menentukan jumlah slaid, menghasilkan nombor rawak, dan kemudian menggunakan kelas "aktif" ke slaid dan penunjuk yang sepadan.

Membina Carousel Asas:

Bootstrap menyediakan struktur karusel teras. Setiap gambar termasuk atribut

untuk warna latar belakang jika pemuatan imej gagal: data-color

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="0"></li>
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="1"></li>
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173958517524890.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A Full-screen Bootstrap Carousel with Random Initial Image " />
      <div class="carousel-caption d-none d-md-block">
        <h5>First Image</h5>
      </div>
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
  </div>
  <a class="carousel-control-prev" href="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" 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="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

JavaScript memulakan karusel, menetapkan selang waktu dan melumpuhkan berhenti:

$('.carousel').carousel({
  interval: 6000,
  pause: false
});

Mewujudkan tayangan slaid skrin penuh:

Peningkatan ini menggunakan jQuery tersuai:

let $item = $('.carousel-item');
let $wHeight = $(window).height();

$item.height($wHeight);
$item.addClass('full-screen');

$('.carousel img').each(function() {
  let $src = $(this).attr('src');
  let $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image': 'url(' + $src + ')',
    'background-color': $color
  });
  $(this).remove();
});

$(window).on('resize', function() {
  $wHeight = $(window).height();
  $item.height($wHeight);
});

dan CSS:

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Kod ini melangkah melalui imej, menetapkan imej latar belakang dan warna pada bekas induk mereka, menghilangkan unsur -unsur

(sebagai latar belakang kini digunakan), dan menyesuaikan ketinggian pada saiz semula tetingkap. Kelas <img alt="Karusel bootstrap skrin penuh dengan imej awal rawak" > slaid awal ditambah melalui jQuery untuk peralihan yang lebih lancar. active

Randomizing slaid awal:

Untuk memaparkan slaid rawak pada beban, keluarkan kelas active Kod ini memilih slaid rawak dan menggunakan kelas

let $numberOfSlides = $('.carousel-item').length;
let $currentSlide = Math.floor(Math.random() * $numberOfSlides);

$('.carousel-indicators li').each(function() {
  let $slideValue = $(this).attr('data-slide-to');
  if ($currentSlide == $slideValue) {
    $(this).addClass('active');
    $item.eq($slideValue).addClass('active');
  } else {
    $(this).removeClass('active');
    $item.eq($slideValue).removeClass('active');
  }
});

ke kedua -dua slaid dan penunjuk yang sepadan.

active

Idea Penyesuaian Lanjut:

Tambah kesan animasi (pudar, skala) menggunakan peralihan CSS atau perpustakaan animasi JavaScript.

• Melaksanakan lapisan imej.
• Rawak slaid seterusnya/sebelumnya menggunakan acara
.
• slide.bs.carousel
Pendekatan yang dipertingkatkan ini memberikan karusel yang lebih dinamik dan menarik. Ingatlah untuk memasukkan fail bootstrap CSS dan JavaScript yang diperlukan.

Atas ialah kandungan terperinci Karusel bootstrap skrin penuh dengan imej awal rawak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!