В F12 проблема выглядит так:



Серенький выделенный кладратик на правильном месте — непонятно за что обрезанная кнопка. в этом и трабла

Уродский красный бордюр — это что бы было виделено образение.

Уже второй день мучаюсь. Пробовал кнопки выводить поверх фотки, но оно тормозит из-за наложения с блюром. А без блюра тени вокруг кнопок нельзя — кнопок на светлом фоне не видно.
Исходник разметки выглядит так (в слайде два div — один с фоткой и один с кнопкми):

<div class="swiper-container">
<div class="swiper-wrapper">
@foreach (var photo in Model.Topic.Blobs)
{
    int w = photo.Width, h = photo.Height;
    <div id="photo_with_buttons" class="swiper-slide" style="border: 1 solid red; width: @(w)px; height: @(h + 30)px !important; display: block; border: 1px solid red">
        <div id="just_a_photo" style="border: 1px solid black; width: @(w)px; height: @(h + 0)px; border: none; display: block">
            <img src="/api/v1/Gallery/@photo.Id" width="@(w)px" height="@(h)px" style="border: 1px solid black"/>
        </div>
        @if (true)
        {
            <div id="buttons" style="width: @(w)px; font-size: 30px; color: white; height: 30px; border: none; left: 10px; text-align: left">
                <i class="fa fa-star-o photo-button" aria-hidden="true"></i>&nbsp;&nbsp;
                <i class="fa fa-thumbs-o-up photo-button" aria-hidden="true"></i>&nbsp;&nbsp;
                <i class="fa fa-thumbs-o-down photo-button" aria-hidden="true"></i>&nbsp;&nbsp;
                <i class="fa fa-share-square-o photo-button" aria-hidden="true"></i>
            </div>
        }
    </div>
}
</div>
</div>

// в самом swiper ничего такого особенного
<script>
    var swiper = new Swiper('.swiper-container',
        {
            slidesPerView: 'auto',
            spaceBetween: 20,
            mousewheel: true,
            keyboard: {
                enabled: true,
            },
        });
</script>

Тут h и w — серверные высота и ширина фотки. 30px = высота шрифта Awesome у кнопок

Вроде же все правильно
Для div.swiper-slide выставлена высота @(h+30)px
Внутри этого div — div#just_a_photo с фоткой, и ниже div#buttons с кнопками, которые и обрезаются подло свайпером.
Для всех трех div высталена же высота. Но swiper гад только div#just_a_photo показывает, а div#buttons с кнопками обрезает.


Чего это вдруг swiper игнорит высоту заданную в .swiper-slide и использует высоту картинки внутри этого div.swiper-slide?

Мне надо что бы кнопа была ниже фотки, и была ВИДНА!!!

посмотреть в F12 можно тут — http://touch-galleries.appspot.com/

Кто нить пробовал в каждый слайд свайпера засунуть один div с фоткой и один div с кнопками?