carousel/sliding 的花式盒子

Question

我遇到了相关花式盒子的问题。我想实现 UI: fancybox 中的图片，带有轮播选项来滑动项目。

这是我需要达到的UI：

这是我的代码：

  <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css'>


<div class="gallery-section">
  <div class="container-fluid" id="nospace">
    <div class="gallery-box">

      <div class="box vertical">
        <a href="assets/img/portfolio/1.jpg" data-fancybox="gallery1">
          <img src="assets/img/portfolio/1.jpg" class="img-fluid">
        </a>
      </div>

      <div class="box">
        <a href="assets/img/portfolio/2.png" data-fancybox="gallery1">
          <img src="assets/img/portfolio/2.png" class="img-fluid">
        </a>
      </div>
      <div class="box vertical">
        <a href="assets/img/portfolio/8.png" data-fancybox="gallery1">
          <img src="assets/img/portfolio/8.png" class="img-fluid">
        </a>
      </div>
      <div class="box">
        <a href="assets/img/portfolio/3.png" data-fancybox="gallery1">
          <img src="assets/img/portfolio/3.png" class="img-fluid">
        </a>
      </div>
      <div class="box vertical">
        <a href="assets/img/portfolio/4.png" data-fancybox="gallery1">
          <img src="assets/img/portfolio/4.png" class="img-fluid">
        </a>
      </div>
      <div class="box vertical">
        <a href="assets/img/portfolio/6.png" data-fancybox="gallery1">
          <img src="assets/img/portfolio/6.png" class="img-fluid">
        </a>
      </div>

      <div class="box">
        <a href="assets/img/portfolio/7.png" data-fancybox="gallery1">
          <img src="assets/img/portfolio/7.png" class="img-fluid">
        </a>
      </div>
      <div class="box">
        <a href="assets/img/portfolio/5.png" data-fancybox="gallery1">
          <img src="assets/img/portfolio/5.png" class="img-fluid">
        </a>
      </div>

    </div>

  </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'></script>

谁能帮我解决这个问题。谢谢你。如果您有任何问题，请告诉我。

Answer 1

您可以在轮播幻灯片元素中放置多个元素。然后，例如，使用 CSS 创建两列。使用 Tailwind 的示例 CSS:

<div class="carousel__slide grid grid-cols-2 gap-4">
  <a href="https://lipsum.app/id/1/900x600" data-fancybox="gallery">
    <img src="https://lipsum.app/id/1/600x400" />
  </a>
  <a href="https://lipsum.app/id/2/900x600" data-fancybox="gallery">
    <img src="https://lipsum.app/id/2/600x400" />
  </a>
</div>

演示 - https://fancyapps.com/playground/1ZP

carousel/sliding 的花式盒子

Fancy box with carousel/sliding

html

css

jquery

fancybox

bootstrap-4