带旋转木马/滑动的花式盒子答案

【问题标题】：Fancy box with carousel/sliding带旋转木马/滑动的花式盒子
【发布时间】：2022-02-07 22:42:46
【问题描述】：

我在面对相关的花式盒子时遇到了问题。我想实现 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>

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

【问题讨论】：

请提供您的尝试并详细说明为什么它不起作用 - SO 不是免费的编程服务
@Pete 我已经发布了我的代码。对此感到抱歉。
我希望旋转木马像猫头鹰旋转木马一样滑动，如图@Pete 所示
查看这个示例，了解如何将 Fancybox v3 与一些轮播相结合 - web.archive.org/web/20210325170940/https://fancyapps.com/… 但对于 v4，它非常简单，请参阅 fancyapps.com/docs/ui/fancybox/#combine-with-carousel
@Janis 当我必须将其设为网格时会出现问题。如何使它像我附加的图像一样网格？

标签： html jquery css bootstrap-4 fancybox

【解决方案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

【讨论】：

非常感谢！