data-role="carousel"

[TorakikiSan]

Hi Olton!

A little help/hint!

Regardless of the video resolution (ex. 1680x1050 or 1920x1080 or 3840x2160), I would like to display various images (old arcade screen shoots) in the center of the screen with the object data-role="carousel". All screen shoots have a fixed width (640px) and variable height. I use

<DIV data-role = "carousel"
      data-auto-start = "true"
      data-controls-on-mouse = "true"
      data-cls-controls = "fg-white"
      data-bullet-style = "square"
      data-period = "3000"
      data-duration = "1000"
    >
    <DIV class = "slide" data-cover = "/snaps/bankp-640px.png"> </DIV>
    <DIV class = "slide" data-cover = "/snaps/mrdo-640px.png"> </DIV>
    <DIV class = "slide" data-cover = "/snaps/pacman-640px.png"> </DIV>
    <DIV class = "slide" data-cover = "/snaps/rodland-640px.png"> </DIV>
    <DIV class = "slide" data-cover = "/snaps/xevious-640px.png"> </DIV>
</DIV>

but the image is displayed full screen.

Is there a way to center in X and Y without resizing them?

Thank you!

[xscode-auto-reply]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.
For urgent issues and priority support, visit https://xscode.com/olton/Metro-UI-CSS

[olton]

You can set a fixed width for the carousel via the data-width = "640" attribute.

[TorakikiSan]

<DIV data-role="carousel"
     data-auto-start="true"
     data-controls-on-mouse="true"
     data-cls-controls="fg-white"
     data-bullet-style="square"
     data-period="3000"
     data-duration="1000"
     data-width="640px"
   >

This are 2 sample images (same width, different height)

but nothing is changed!

[olton]

640 without px

[TorakikiSan]

Sorry for the "px", but I tried both with and without and nothing has changed.

[olton]

Fixed in 4.4.1

• Carousel: fixed usage attribute data-width, now this attribute applied to max-width css property for carousel

[olton]

In the current version, slides fill the entire carousel according to its width and the rule for height. You can set the width for the carousel (already fixed). or put the image inside the slide.

[olton]

I'm added in 4.4.1 new component ImageBox - https://codepen.io/olton/pen/GRqZBVN

[TorakikiSan]

Thank you very much!