Streaming live at 10am (PST)

Issue with image slider on website

#1

Hi,
I am having issues with the image slider on our website. It works fine in smaller browsers but in larger browsers the images grow and get cut off. This is happening under all pages under the ‘Social Media Management’ tab.

Here is my site Read-Only: https://preview.webflow.com/preview/born-social?utm_source=born-social&preview=19a2a0b9d930fb31f3d36dd84d741fdd

Thanks in advance for your help :slight_smile:

1 Like
#2

Hello @Janelle_Warner

The first thing I want to mention is that the images are veeeery big 3mb and larger…This is very bad for the user loading time. Consider making them smaller in size. Maybe around 200/250 kb

I see the problem you are talking about

One way to solve this is adding the images as a background and play with min. height. If you still want to use real images, you can put a div > the image inside > add a class to the images .slider-images > add little css code to the head of your site > play with the min. height

The css code

.slider-image {
  object-fit: cover;
}

Other way is making the slider height 100%. Now the height is 300px. Try making the slider 100% and tell me what you think.

Piter :webflow_heart:

1 Like
#3

Thank you for your help!

So I’ve almost fixed it but now the slider seems to be cutting off the images - see attached pic (the pic on the left is made up of 2 pictures), the images aren’t scrolling neatly into each other. If you have any way of fixing this I would greatly appreciate your help! Thanks!