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 blurHere 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
LOCALDISK
Anyway, I make the carousel using an array too
-
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%?