Fancy box with carousel/sliding-CodePudding

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:

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/[email protected]/dist/jquery.fancybox.min.css'>


<div >
  <div  id="nospace">
    <div >

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

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

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

    </div>

  </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/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.

CodePudding user response：

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

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

Demo - https://fancyapps.com/playground/1ZP