3

Как видно в этом примере, когда я использую 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>

Вопрос: Как сделать так, чтоб не было этой рамки из-за размытия, чтоб она обрезалась или еще как-нибудь, чтоб картинка нормально выглядела? Может есть какой-нибудь другой способ, или плагин, который делает блур качественнее?

2 ответа 2

2

Можно попробовать растянуть картинку на 10px (5+5) в двух осях, лишнее скрыть отрицательным margin:

$(document).ready(function(){

    $('.main-carousel').slick({
        accessibility: 'true',
        arrows: 'true',
        slidesToShow: 1,
        slidesToScroll: 1
    });

});
.main-image {
    filter: blur(5px);
    margin: -5px;
    width: 1376px;
    height: 778px;
}
<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>

2
  • Хороший вариант, но при уменьшении margin справа видна другая картинка, как можно это исправить?
    – Nikita
    27 июл 2017 в 21:06
  • Не совсем понимаю, о чем вы. Можете попробовать взять не 5px запаса, а больше ` margin: -10px; width: 1386px; height: 788px;`
    – br3t
    27 июл 2017 в 21:11
0

$(document).ready(function(){

    $('.main-carousel').slick({
        accessibility: 'true',
        arrows: 'true',
        slidesToShow: 1,
        slidesToScroll: 1
    });

});
.main-image {
    filter: blur(5px);
}

.slick-initialized .slick-slide {
    overflow: hidden;
}
<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>

overflow: hidden; для слайда. Лучше не объявлять общие стили, а повесить на слайд какой-нибудь класс и прописать hidden для него.

Так же, вот: https://www.w3schools.com/cssref/css3_pr_filter.asp по фильтрам. Лучше использовать префиксы :)

1
  • Мне это помогло, спасибо!
    – Nikita
    28 июл 2017 в 9:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.