masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Bootstrap 5: Produk Slider/Karusel
P粉214176639
P粉214176639 2024-03-26 19:24:34
0
1
516

Saya cuba menggunakan Bootstrap5 untuk mencipta produk gelangsar/karousel seperti yang ditunjukkan dalam skrin berikut:

Di sini saya tampal, ini kod semasa saya: 

<style>
<!-- Temporary -->
.carousel-control-next-icon {
    background: black;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Home Section End -->
<div class="container-fluid mt-3">
    <div class="row g-4">
      <div class="col-xl-6 col-md-4 ratio_medium d-sm-block d-none"> 
      <div class="home-section bg-white div-content" style="height:236px;">
    <!-- With Captions -->
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item active">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">          
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-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="#carouselExampleCaption" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
      </div>
      </div>
      <div class="col-xl-6 ratio_65 d-xl-block d-none">
          <div class="home-section bg-white div-content" style="height:236px;">
    <!-- With Captions -->
<div id="carouselExampleCaption2" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item active">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">          
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaption2" role="button" data-bs-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="#carouselExampleCaption2" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
      </div>
      </div>
    </div>
  </div>
<!-- Home Section End -->

Tetapi pada masa ini ini kelihatan buruk:

Hanya satu item yang dipaparkan, tetapi saya perlu memaparkan tiga setengah seperti ini. Saya juga cuba menambah di bawah harga foto dan tajuk produk dan imej harus responsif. Bolehkah sesiapa membantu saya membetulkan kod ini?

P粉214176639
P粉214176639

membalas semua(1)
P粉066725148
P粉0667251482024-03-27 09:05:03 Tingkat 1

Jika anda sedang mencari ini, anda boleh menemui Codepen ini dan Coply ini.

Menggabungkan kedua-duanya memberi anda contoh yang berkesan (Codepen).

JS mengklon setiap satu .carousel-item 的内容，因此每个 .carousel-item 将保存其 (5) 个同级的内容。 CSS 更改变换 jadi peluncur bergerak dengan sewajarnya.

Ia juga responsif dan hanya memaparkan item sehingga titik putus minimum, tetapi ini boleh dilaraskan dengan mudah (CSS sahaja).

Ini adalah coretan, gunakan pautan "Halaman Penuh" untuk melihatnya dalam skrin penuh:

Nota: Sekumpulan !important mesti ditambahkan pada CSS, yang tidak diperlukan jika anda memuatkan CSS selepas Bootstrap, seperti Codepen. 

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
  const minPerSlide = 5
  let next = el.nextElementSibling
  for (var i = 1; i 

.carousel-item .col {
  padding: 0 5px;
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item>div {
    display: none !important;
  }
  .carousel-inner .carousel-item>div:first-child {
    display: block !important;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex !important;
}


/* medium and up screens */

@media (min-width: 768px) {
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(20%) !important;
  }
  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-20%) !important;
  }
  /*  half slides CSS */
  .carousel-inner:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 85%;
    left: 0;
    content: "";
    display: block;
    background-color: #fff;
    z-index: 2;
  }
  .carousel-inner:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 85%;
    content: "";
    display: block;
    background-color: #fff;
    z-index: 2;
  }
  .carousel-control-prev {
    left: 12% !important;
  }
  .carousel-control-next {
    right: 12% !important;
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0) !important;
}



sssccc
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan