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