Resize Carousel images ti fit device screen

[Ivan6481911]

Hello. I have an issue regarding Carousel component image size. Now it looks like on attached screen. I would like to know, how can I set size to fit different screen sizes. I want the image (or carousel entire) to scale defining screen width. For example, if screen width = 480, images are 400 width; if screen width = 800, images width = 720. Can this be done automatically or I have to check in code every time? Please, give me some example how to customise width and height.
Other components must resize also (audio and HTML) -I think this must be similar.
Thanks!

[Ivan6481911]

I have to set width and height manually, right?

1. Get screen size;

2. calculate size of image and carousel

3. set size of image and carousel.
   Can you help me with 1 and 3, please.

   I set images with mapping, like here - https://d37wxxhohlp07s.cloudfront.net...

   Thanks!

[Ivan6481911]

I found that carousel is resizing its width automatically. I use
element.css('width', '100%');
element.css('height', '100%');
for image in mapping.
Carousel width is calculating automatically, but height must be calculated and set manually, correct ? How can I get screen dimensions to set it in localStorage variable and make calculation ?

[Kateryna Grynko]

Hi Ivan,

Please try this custom CSS:pre
.ui-carousel-box{
height:auto;
padding-bottom: 50px;
}
.ui-content{overflow-x:visible;}

.ui-carousel {
overflow:visible;
}/pre

[Ivan6481911]

Thanks for the reply, Katya, but it doesn't work for me.

1. I just added to style.css your code;

2. I also set class name of the carousel to ui-carousel-box

   But it doesn't do anything.

[Ivan6481911]

Do I miss something ?

[Ivan6481911]

I found out that only height, set in interface builder works.

[Maryna Brodina]

Hello! Instead CSS we've suggested try to use JS. Set for image inside Carousel Dimension 100% 100%. On page Show event run the following JS: prevar dimension = $(window).width()-50;
$("[dsid=carouselName]").attr("style", "height: "+dimension+"px !important;");/prewhere carouselName - name of your Carousel

[Ivan6481911]

Great!!! It works. But I want to calculate height relatively to img width. The question is, how to get width. for example
var img = Appery('myImg');
var width = img('width');
this width returns me string "111px" as result. But I need int. How can I get it? Thanks!

[Ivan6481911]

I got it by myself.
Thanks again!!!