ons-carousel-item getting blur

naufal17

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>

</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

LOCALDISK

Anyway, I make the carousel using an array too

emccorson

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

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