Onsen- Carousel height depends from image height



  • i use the onsen carousel to show 3 photos every time. I would like to see the photos on carousel on 100 % of the size independent of the device screen size. My code is :

    <ons-carousel  style="height:230px;" swipeable overscrollable auto-scroll auto-refresh  auto-scroll-ratio="0.2" var="carousel">
                    
    <ons-carousel-item ng-repeat="Diamoni_image in DiamoniImagesArray | startFrom : 1" >
    
       <img src="{{Diamoni_image.path}}" style="width:100%; height:auto;">
                   
     </ons-carousel-item>
    <ons-button style="margin-top:25%;  background-color: rgba(25, 142, 187, 0.5); float:right" ng-click="carousel.next()">
                        <ons-icon icon="fa-arrow-right"></ons-icon>
    
                    </ons-button>
                    <ons-button style="margin-top:25%;  background-color: rgba(25, 142, 187, 0.5); float:left" ng-click="carousel.prev()">
                        <ons-icon icon="fa-arrow-left"></ons-icon>
                    </ons-button>
                </ons-carousel>
    

    i set the height at 230px but in some devices the picture is not all visible . How to control this? Thanks in advance.


  • Onsen UI

    @koundou Are you perhaps looking for fullscreen attribute?



  • @Fran-Diox
    Thanks for the answer. No the carousel and the image also i do not want to cover the whole of screen but cover the screen that is the height of the image. For example if the image height is 200px i want the carousel cover only 200px of the screen and the image show 100% of the size in all different size of device screen.


Log in to reply