Logo Carousel Slider

I’ve added the logo carousel slip to https://beyondtouch.co.uk/workshops-1. I’ve currently got two issues;

  • firstly, the current size is good on desktop, but on mobile, the container height is being maintained, but the logo height isn’t. I want to maintain the height of the image
  • secondly, the client requested forward / back navigation. I’ve tried adding this for the standard testimonial sliders that I’ve used elsewhere, but I can’t get it fixed

If I may
a) is this a inline slider element with autoplay marquee option on?
b) are the slides set to paged or auto? (it looks like auto to me)

I’t set it to paged and the number of slides to some lower number on mobile devices. and set the height of the carousel accordingly.

I can’t follow the “container height is maintained, but the logo…”. Here it scales properly. It is just too small on mobile devices for my old eyes.

I’m not sure if the logic “autoplay marquee” and “navigation with left and right” buttons is plausible.
If you set it to interval, than your navigation buttons should work.

Thankyou.

I’ve made a couple of changes and it’s not nearly as I want it to be. On mobile it’s fine, but on desktop it’s not respecting the height of the images

Well that is not an issue of the slider itself.

How did you position the image inside the slider (the container the image element is in)?

Do you use flex for the container? If yes: it looks like horizontal bottom and vertical center. If so, try horizontal center.

Than what is the size of the image? I mean in css… an absolute or a relative one?

Do you use the “retina” option for the image? The “eye” icon left to the image dimensions?

this is the logo carousel slider from modern sliders, it’s pretty much ‘out of the box’

I have added the images to the looper provider, that’s pretty much it. Not quite sure how it can’t be an issue of the slider?

let me say it this way: not every basket with oranges suits the apples. The prototypes of the sliders were build with specific images in respect to size and dimensions. Otherway:
If you size your logos equally according to the one, which works, or if the sizing is not possible, then you make the canvas of the images equal, it should work as designed.
If you mix different ratios of images in the same container where the overflow is hidden, some of them may get cut off.
It looks like your images have all width 100%, height to auto. but they have different height dimension. Hence some of them are cut off at the bottom. Correct me if I’m wrong.

you could post a screenshot of these settings, especially the content position and dimensions:

thanks for the reply.

I get that the prototypes are built to a specific image size, but it’s a safe bet that most sliders built using that prototype won’t use the same images, so expecting that the carousel would adapt (or be easily adaptable) is not unreasonble

All images are the same size 480 x 600

I have added the login details for the first secure note, happy for you to have a look, the secreenshot you’ve sent is different to mine as it uses a looper

Hi,
I’m a user who experienced some PITA with this so I assume I can give a hand, here and there. But I can’t log into your site nor see the secure note though.

Anyway you can set your workspace in the preferences like this:

It depends of your screen size to accommodate both columns. As I’m on a 32" monitor and a 27", its very comfy to work that way.

And yes, your point, it is reasonable to expect this to work out of the box, until its not.

I suggest, you work the DOM from the top to the bottom and check your settings. Judging by your screenshot the Thames Valley, Ngage, Vale of Aylesbury a Meech Logo are just right. The “West something” is off, it’s not horizontally centered. There may be a couple of reasons for this.
I see, you set up a max height for the slide (container for the image element) to 300px, but your images are 600 px in height. I’d start to check the flex setting for the slide container. Is the content horizontally centered or set to top? I guess top.

Suggestion: Do not set the absolute max height to the “slide” container but the top most container of the carousel.

What may happen, if you set flex to horizontal center. In case you set the img width to 100% and your logos (not the canvas of those) are higher than 600px, they will be cut off at the top and bottom.

To your setting of the slide overflow. This may be set to visible, but it does not have an effect on the content visibility, if any container above has set the overflow to hidden and a height less than 600px. I would need to double check, but I’m pretty sure being right.

And there is one (two) more setting to check: What are the “object fit” settings of the img element? Are there any settings of the img element other than auto or none?

Hello @simonwr1976,

Thanks for writing to us.

I’ve reviewed your site, and the logo carousel is displaying perfectly with the height settings you’ve applied. It is working fine on my end on the desktop and mobile as well. In case you are pointing to something else, please let us know.

Thanks

the logos you have shown on the screenshot are approx 50% of their height. On mobile they are showing as their full height

I want the full logo height to show on desktop too

Hello @simonwr1976,

It seems that you have added the custom height to the Slide element and the Figure element. I would suggest please remove the custom height from the slide element andthe Figure element. Please have a look at the given screenshot below.


Please note you need to chnage this settings to desktop mode only.

Hope it helps
Thanks

thanks, made those changes. still fine on the mobile, better on the desktop, but not quite there, it’s still cropping the bottom off the images

Hello @simonwr1976,

I’ve reviewed your settings, and it appears you’ve applied a min-height to the Logo Carousel Slider DIV. I would recommend setting the min-height to 0 to allow the images to scale naturally based on their width ratios. Additionally, try adjusting the Slides Per Page setting to 3 or 4 so the image gets a width and height that would automatically increase the image height.

Thanks

I’ve changed those settings, but it’s still cropping the bottom of the images on desktop

Hello @simonwr1976,

I would suggest you please use the Image element instead of the Raw content element and add the dynamic content code to the Image source to pull the image. Please clear your browser cache and recheck it.

Thanks

Thanks for the reply. I’ve changed from raw content to an image, but the result is still the same, the bottom of the images are still being cropped

Hey @simonwr1976,

Try appyling a Min Height of 250px to the Slide element.

I’ve just changed that, but it’s not made any difference unfortunately

It looks like 300px will do the trick.

Thank you :pray: that’s fixed it