Как исправить конфликт скриптов JS (Swiper и Slick slider)?

в проекте использую swiper и slick slider, понимаю возможно не имеет смысла использовать две библиотеки одновременно. но вот тещу и ту и другую. Проблема видимо в том, что эти две библиотеки конфликтуют!

Мой проект является просто болванкой для теста и учебы.

Swiper - отвечает за пролистывание сайта по экранно Slick slyder - просто на какой-то странице есть слайдер с блоками Проект написан на django.

Я могу зажать левую кнопку мыши и потянуть вверх, то сработает пролистывание swiper, а вот вправо и влево slick slyder не работает.

На сколько я знаю за такое пролистывание отвечает в JS draggable: true

Пытался отключить в swiper и оставить только в slick slyder, но ничего не меняется!

Подскажите как решить данную проблему ?(js только начал изучать)

// Swiper
  // init Swiper:
  let pageSlider = new Swiper('.wrapper', {
    
    // Свои классы
    wrapperClass: "page-wrapper",
    slideClass: "page-screen",

    // Вертикальный слайдер
    direction: 'vertical',

    // Количество слайдов для показа
    slidesPerView: 'auto',

    // Включаем параллакс
    parallax: true,

    // Управленрие клавиатурой
    keyboard: {
      // Включить\выключить
      enabled: true,
      // Включить\выключить
      // только когда слайдер
      // в пределах вьюпорта
      onlyInViewport: true,
      // Включить\выключить
      // управление клавишами
      // pageUp, pageDown
      pageUpDown: true,
    },

    // Управление колесом мыши
    mousewheel: {
      // Чувствительность колеса мыши
      sensitivity: 1,
      // Класс обьекта на котором
      // будет срабатывать прокрутка мыши
      // eventsTarget: ".image-slider"
    },

    // Отключить функционала
    // если слайдов меньше чем нужно
    whatchOverflow: true,

    // Скорость
    speed: 800,

    // Обновить свайпер
    // при изменении элементов слайдера
    observer: true,

    // Обновить свайпер
    // при изменении родительских 
    // элементов слайдера
    observeParants: true,

    // Обновить свайпер
    // при изменении дочерних 
    // элементов слайдера
    observeSlideChaildren: true,

    // Навигация
    // Буллетыб текущее положениеб прогрессбыр
    pagination: {
      el: '.page-pagination',
      type: 'bullets',
      clickable: true,
      bulletClass: "page-bullet",
      bulletActiveClass: "page-bullet-active",
    },

    // Скролл
    scrollbar: {
      el: '.page-scroll',
      dragClass: "page-drag-scroll",
      // Возможность перетаскивать скролл
      draggable: false,
    }
  });



//slider slick
$(document).ready(function () {
  $('.slider').slick({
    arrows:true,
    dots:false,
    slidesToShow:2,
    easing:'ease',
    infinite:true,
    centerMode: true,
    draggable: true,
  });
});

CodePen

Небольшая проблема в CodePen, не совсем коректно отображается slick slider, а так загружаю codepen для понимания работы swiper.