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