Monaca Onsen UI Discord Chat Github Repo

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%?