Image Carousel
sydk2017
Hello,
I need to be able to display images that rotate (with a link to different pages) but are always 100% height and 100% width.
Image carousel will squeeze the images, and setting desktop, tablet, mobile devices height dosen't always work.
Is there some way to force image carousel to always display the image at the correct dimensions, correct proportions?
Or, is there a different way to have rotating images that keep their proper dimensions?
I used to use Simple Spotlight Pro for this - but it hasn't been updated since Joomla 4, it's been working with Joomla 5 so far, but when I move to Joomla 6 I need to find a better solution.
Thanks in advance,
Syd
Mehtaz Afsana Borsha
Accepted AnswerHi,
Thanks for reaching out to us. You need to set the width and height in the settings, or you can use custom CSS to adjust the image proportions to your preference. For CSS guidance, you can follow this blog:
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
-Regards.
sydk2017
Accepted AnswerHi Mehtaz,
Sorry - but your answer was no help whatsoever. I regularly use the developer tool and I tried to change the CSS already but the image was still squeezed on different devices. There was no way I could find to make the image always the same proportions. Setting the width and height in the settings dosen't help either becuase if the browser window isn't at full width, the image is squished.
To reiterate - I need to know how to force image carousel to always show the image at the proper proportions no matter what device it's being seen on.
Thanks in advance for any insight you can offer.
Syd
Mehtaz Afsana Borsha
Accepted AnswerHi
I am sorry to say that there is no default option to do that. You can do it only CSS.
Mehtaz Afsana Borsha
Accepted AnswerGive me your site URL please.
sydk2017
Accepted Answer Mehtaz Afsana Borsha
Accepted AnswerHi
Use this CSS in your custom.css file
.sppb-carousel-extended-outer-stage{
width: 1600px !important;
height: 600px !important;
}
sydk2017
Accepted AnswerI added the code, but the images are still not the correct size. You can see it here: https://www.daiquirideck.com/home25
Also - I see that the slider does not work at all on Microsoft Edge.
Mehtaz Afsana Borsha
Accepted AnswerIt seems ok on my end. I have checked it on Chrome.
This code does not affect the slider. It just gives the slider width and height. For the stop working side, you can create a new forum post about that new issue. Our team will help you.