Search code examples
htmljquerycssbootstrap-4fancybox

Fancy box with carousel/sliding

I have a problem facing related fancy box. I want to achieve UI: images in fancybox with carousel option to slide the items.

Here is the UI i need to achieve:

UI

here is my code:

  <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>

Can somebody help me to sort out this problem. Thank you. If you have any question let me know.

Solution

  • You can put multiple elements inside carousel slide element. Then, for example, use CSS to create two columns. Example using Tailwind CSS and Carousel 4:

    <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>