carousel/sliding 的花式盒子
Fancy box with carousel/sliding
我遇到了相关花式盒子的问题。我想实现 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>
谁能帮我解决这个问题。谢谢你。如果您有任何问题,请告诉我。
您可以在轮播幻灯片元素中放置多个元素。然后,例如,使用 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>
我遇到了相关花式盒子的问题。我想实现 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>
谁能帮我解决这个问题。谢谢你。如果您有任何问题,请告诉我。
您可以在轮播幻灯片元素中放置多个元素。然后,例如,使用 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>