Can I make a full screen carousel with each slide having multiple images?

Hello, everyone! I just started using Squarespace yesterday, so I'll try my best to explain clearly.

As the title states, I'm trying to add a section made entirely from a carousel, with each slide taking the whole screen.

This I can do easily. The problem comes with the fact that I need each slide to have two images, side by side. I need this in order to be able to arrange all the elements for the mobile version.

I'll add a little sketch to show the overall structure, divided in two sections. The red margin would be the visible screen, one would need to scroll down to get to the carousel, with each slide having two elements each, arranged side to side for the desktop size, and vertically for the mobile size.

I'll also include two dummy prototypes I made in XD to help better illustrate what I'm trying to achieve. 

Desktop size: https://xd.adobe.com/view/9533f2a3-6f16-4d8f-8767-b967d4529691-c060/?fullscreen
Mobile size: https://xd.adobe.com/view/abd5feab-314a-48de-85f0-578f33219bbf-fe86/?fullscreen

I really have no idea if what I'm trying to do is even possible. I believe it is, but I might be wrong. I would love if someone could point me in the right direction. 

Thank you everyone. 🙂

We can use Gallery/List Section + CSS code to do this, but it is a bit manually.

The easiest way is to design an image with two different halves.

Hi, tuanphan. Sorry for the late reply. I found out I was doing everything terribly wrong and it took me a while to get to where I was again.

I finally managed to solve the riddle using two gallery/banner sections and code to hide one of each sections in each screen size.

Here's the section I used.

And here's the code, in case it helps anyone else. You'll need the 'Squarespace ID Finder extension' and replace the  " section[data-section-id="YOUR-SECTION-ID"] " text with your section ID.

// Hiding sections on mobile
@media screen and (max-width: 641px) {
section[data-section-id="YOUR-SECTION-ID"] {
 display:none !important;
  }
}

// Hiding sections on desktop
@media screen and (max-width: 641px) {
section[data-section-id="YOUR-SECTION-ID"] {
 display:none !important;
  }
}

Thanks for your help, tuanphan! 

Hope this can be of help to someone else. 🙂

Can you check image again? First screenshot, I can't access it

Oh. Don't know what happened. It kinda got uploaded twice and the first one got messed up.

Doesn't matter it was the same as the this one: 

On 10/4/2023 at 1:33 PM, Gonz said: