Как видно в этом примере, когда я использую blur(5px)
, картинка становится меньше на 5 пикселей из-за блура и можно видеть по краям цвет (от другой картинки).
$(document).ready(function() {
$('.main-carousel').slick({
accessibility: 'true',
arrows: 'true',
slidesToShow: 1,
slidesToScroll: 1
});
});
.main-image {
filter: blur(5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="main-carousel">
<div><img class="main-image" src="http://www.1366x768.ru/nature/373/373-zima-sneg-doroga-oboi-priroda-1366x768.jpg" alt="Chaina"></div>
<div><img class="main-image" src="http://www.1366x768.ru/macro/7/7-beloe-pero-makro-oboi-1366x768.jpg" alt="Chicago"></div>
<div><img class="main-image" src="http://www.1366x768.ru/macro/8/8-trava-makro-oboi-1366x768.jpg" alt="New York"></div>
</div>
Вопрос: Как сделать так, чтоб не было этой рамки из-за размытия, чтоб она обрезалась или еще как-нибудь, чтоб картинка нормально выглядела? Может есть какой-нибудь другой способ, или плагин, который делает блур качественнее?