Виталий Першин

Зависит от того что надо показать, сколько места выделить и т.д.., можно контейнер раздвинуть вниз при помощи padding-bottom и будет определенный запас свободного места:

.swiper-wrapper {
/*   transition:all 0.5s; */
  transition:none;
  padding-bottom: 100px;
}

.submenu {
  position: absolute;
  top: 100%;
  height:100px;
  width: 100%;
  background: orange;
}

Если же места надо больше, а отступ больше сделать нельзя, тогда можно при помощи js показывать нужный контент, например можно использовать tippyjs и вставлять контент в body appendTo: () => document.body,

Создайте кастомную пагинацию и вставляйте куда угодно:
<div class="dots" data-slider-dots></div>

pagination: {
                el: '[data-slider-dots]',
                type: "bullets",
                clickable: true,
                bulletClass: "dot",
                bulletActiveClass: "dot_active",
                renderBullet: function (index, className) {
                    return '<div class="' + className + '"></div>';
                },
            },

Примерно так:

Примерно так:

Надо задать высоту, как-то так:

Как вариант:


Или с помощью js кастомные активные слайды задавать:

if (/iPad/i.test(navigator.userAgent)) {
// Тут инициализируем слайдер для iPad
} else{
// Тут инициализируем слайдер для всех остальных устройств
}

А состояние в горизонтальном или вертикальном положении вы можете менять через брейкпоинты

Используйте breakpoints

let swiper = new Swiper(".swiper__info", {
    loop: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        clickable: true,
        el: ".swiper-pagination",
    },
    allowTouchMove: false,
    breakpoints: {
        // when window width is >= 1024
        1024: {
            allowTouchMove: true,
        },
    },
});

Поместите свою карточку slider-card внутрь слайда и делайте с ней все что хотите , а сам слайд swiper-slide не трогайте

А вам принципиально использовать древний swiper? С новым все нормально работает:

reverseDirection
speed

slidesPerGroup: 10,

example

swiper.slideNext();

Удобнее было бы работать с полным кодом, чтобы можно было протестировать. Попробуйте так:

var swiper = new Swiper('#slider', {
  direction: 'horizontal',
  loop: false,
  init: false,
  mousewheel: true,
  freeMode: true
});

swiper.on('init resize', function() {
 	asideListItems[currentActive].classList.add(activeItemClass);
});

// init Swiper
swiper.init();

$(".slider").slick('setPosition');
и
$('.slider').slick('reinit');
еще можно удалить $('.slider').slick('unslick') и создать заново. Но лучше всего setPosition