#Image Carousel won't work for non-square images (HELP)

24 messages · Page 1 of 1 (latest)

granite oarBOT
#

@royal coyote

File Attachments Not Allowed

For safety reasons we do not allow file and video attachments.

sassythesasquatch0440 Said

I made an image carousel (code file shared - I use notepad++), and while it works perfectly fine for images with aspect ratio 1:1, any rectangular images sit inside the carousel container, while the shadow is applied to the whole carousel, and not just the image, making it look awful. See attatched picture. Any help is TREMENDOUSLY appreciated as I've been trying to get this to work for hours and hours

Code Formatting

You can share your code using triple backticks like this:
```
YOUR CODE
```

Large Portions of Code

For longer scripts use Hastebin or GitHub Gists and share the link here

Ignored these files
  • Carousel
royal coyote
#

@valid vector when I try to copy paste it just wants to put a file in instead of the text wtf

valid vector
#

that's alright

granite oarBOT
#

@royal coyote

sassythesasquatch0440 Uploaded Some Code
Uploaded these files to a Gist

message.txt

View The Gist

For safety reasons we do not allow file attachments.
royal coyote
#

see it wont allow it

valid vector
#

It did haha

royal coyote
#

wdym it did?

valid vector
royal coyote
#

ohhhhh

#

my bad

#

Ive been looking at screens for too long

#

So this is the problem I have

#

The shadow applies to the whole carousel container, but obviously that looks shit when the image inside is smaller than the container

#

The style code is all chatgpt. I think the cursor pointer lines are the only ones doing anything

valid vector
royal coyote
#

Well it functions just fine. Its just that image I sent. Don't you see the shadows going beyond the image?

#

As you can see its no problem with square images

image.png
valid vector
#

so you want to trim the shadow if the image is small?

royal coyote
#

If thats possible

#

or just make the carousel container itself dynamic so it just fits to the images

#

Wait I think I just solved it without using code at all

#

I think it has to do with precisely sizing the images themselves

#

The reason the shadows applied above and below the image were beacuse it was technically a square image, only it was a transarent png with that image in the middle if that makes sense