Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-carousel-item getting blur



  • Hi guys, I need to make a menu button with a carousel, and I put a few images on it
    I was trying to make it on the playground and it’s work, the images are not getting blur. But when I try to make it on my laptop, using my own images from my localdisk, its blur

    Here is the code that I made on the playground

    <ons-page ng-controller=“PageController as page”>
    <ons-toolbar>
    <div class=“center”>Carousel</div>
    <div class=“right”>
    <ons-toolbar-button>
    <ons-icon icon=“ion-navicon, material:md-menu”></ons-icon>
    </ons-toolbar-button>
    </div>
    </ons-toolbar>

    <div class=“list”>
    <ons-carousel swipeable overscrollable item-width=“110px”>
    <ons-carousel-item>
    <img src=“assets/img/movie_cover_template.jpg”>
    </ons-carousel-item>
    <ons-carousel-item>
    <img src=“assets/img/movie_cover_template.jpg”>
    </ons-carousel-item>
    <ons-carousel-item>
    <img src=“assets/img/movie_cover_template.jpg”>
    </ons-carousel-item>
    <ons-carousel-item>
    <img src=“assets/img/movie_cover_template.jpg”>
    </ons-carousel-item>
    </ons-carousel>
    </div>

    </ons-page>
    <style type=“text/css”>
    .carousel ons-carousel-item img{
    width: 100%;
    max-height: 190px
    }
    .list{
    margin: 10px;
    height: 130px;
    padding-top: 30px;
    }
    .list img {
    width: 90%
    }
    </style>

    And here is the result
    PLAYGROUND
    1_1582760700569_plyg.png
    LOCALDISK
    0_1582760700566_local.png

    Anyway, I make the carousel using an array too


  • administrators

    It might be because you are scaling down the image size in the carousel. I haven’t checked but it looks like the width: 90% rule could be scaling the image down and causing the blurring. Does it blur when the width is 100%?