Сделать слайдер JS отзывчивым

Question

У меня есть виджет-слайдер на веб-сайте, над которым я работаю, и мне стало известно, что виджет выглядит забавно, когда сайт открывается на мобильном устройстве.

Мой виджет здесь: https://jsfiddle.net/uxfj4eng/ Используется jQuery 3.3.1.

Проблема заключается в том, что ширина ползунка не регулируется при отображении на экране меньшего размера.Ширина ползунка в настоящее время рассчитывается следующим образом:

  var slideCount = jQuery('#slider ul li').length;
  var slideWidth = jQuery('#slider ul li').width();
  var slideHeight = jQuery('#slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

Ширина slider ul li здесь жестко задана в 800px:

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  margin: auto;
  padding: 0;
  width: 800px;
  height: 400px;
  text-align: center;
  line-height: 30px;
}

Я не совсем уверен, каксделайте так, чтобы ширина слайдера соответствовала ширине его контейнера.Я тестировал вещи, используя инструменты разработчика Chrome / режимы устройства, и ничего, что я пробовал до сих пор, не сработало.

Любая помощь приветствуется !!