Добрый день. Есть необходимость свертсать слайдер на главной странице:
1) пролистывание на 1 страницу осуществляется по наведению мыши на текущий слайд т.е. 1 наведение 1 слайд;
2) пролистывания с эффектом fade (один тухнет другой появляется)
Все остальное время слайдер стоит просто.
Попробовал написать использую bootstrap4 carousel, но столкнулся с тем что я не знаю как сделать эффект fade на нем, а если и получалось то текущий слайд резко исчезает, а новый появляется медленно и еще почему то при наведении на последний слайд курсора пролистывание идет через первый слайд (он показывается, но только на короткий промежуток времени) на jsfiddle код работает почему то как часы, но не у меня хотя мой же. Решил использовать swiper так как пользовался ранее, все замечательно работает, но косяк с позиционированием элементов. текст на слайдах заходит за контейнер в котором он находится и просто исчезает (в мобилках в основном).
Ссылки на jsfiddle соответственно на карусель, второй на свипер. 
https://jsfiddle.net/AShukilovich/aqyrj8xz/2/
https://jsfiddle.net/AShukilovich/8kvo4qwm/1/  (почему то не хочет свипер подгружаться, на локалке все корректно)
 

<!--Таблица на диве-->
<div class="table">
        <div class="row">
            <div class="cell cell-1">1</div>
            <div class="cell cell-2">2</div>
        </div>
        <div class="row row-2">
            <div class="cell cell-3" rowspan="2">3</div>
            <div class="cell cell-4">4</div>
        </div>
    </div>
/*——css реализация—————*/
.table{display: table; border: 1px solid silver; padding: 10px;}
.row{display: table-row; border: 1px solid silver; padding: 10px;}
.cell{display: table-cell; border: 1px solid silver; padding: 10px;}
подскажите как склеить ячейку 3 и 4? Спасибо всем за помощь!