Slick Slider - Only show one slide on mobile at specific width with overflow-scroll

Question

Thanks in advance for any help. I have been trying to resolve this for over 48hrs, no matter what I try I hit a wall.

I have a grid (table), I want the size to remain the same 940px across all device sizes and on any small devices for overflow-scroll so overflow can be side scrolled. I am using Webflow builder so I don't want to all custom code. Just hopefully modify the slick slider code or webflow settings.

Image of table -desktop view I am using slick slider to turn it into a carousel, I disabled all touch/swipes so carousel was not slidable/swippable unless arrow were used.

Code inserted to disable:

swipeToSlide: false, 
arrows: false, 
draggable: false, 
touchMove: false, 
swipeToSlide: false, 
touchThreshold:0, 

Everything on desktop works as expected. However on mobile the carousel shows all three slides, even settings are set to 1

slidesToShow: 1, 
slidesToScroll: 1, 

AND

responsive: [ 
{ 
// tablet 
breakpoint: 991, 
settings: { 
slidesToShow: 1 
} 
}, 
{ 
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]

However on mobile it continues showing all three slides on side scroll, arrows controls scroll one by one. mobile you can see more than one slide- separated by green side cells

I want to only view one slide on mobile with overflow side scroll grid so you can see full grid but not all three slides.

Ready only: Webflow - Anastasia Stallcop Portfolio https://preview.webflow.com/preview/anastasiastallcop-09463966869e63530c18a?utm_medium=preview_link&utm_source=designer&utm_content=anastasiastallcop-09463966869e63530c18a&preview=e4ad52b0551c0685b1b170f3fd29714d&pageId=62b67bbd0134354aa31af254&workflow=preview

Published: https://anastasiastallcop-09463966869e63530c18a.webflow.io/case-study-template-copy-2

HEAD CODE

<style>

.text-contain  {pointer-events: none;}

.list::-webkit-scrollbar {
  display: none;
}

</style>

BODY CODE

<!-- NEW Dragable Slider -->
<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>


// when document is fully loaded
$( document ).ready(function() {


$('.list').slick({
  dots: false,
  speed: 700,
  infinite: true,
  swipe: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  swipeToSlide: false,
  arrows: false,
  draggable: false,
  touchMove: false,
  swipeToSlide: false,
  touchThreshold:0,
  responsive: [
    {
      // tablet
      breakpoint: 991,
      settings: {
        slidesToShow: 1
      }
    },
    {
      // mobile portrait
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

$('.slider-prev').click(function(){
    $("#slider-id").slick('slickPrev');
});

$('.slider-next').click(function(){
    $("#slider-id").slick('slickNext');
});


});


</script>

Answer 1

I figured it out by complete accident! I was testing a different slider (splide) I had copied from a youtubers website and noticed it would work on that one when I pasted my contents into it but not on my original slider.js, so I noticed the only different was the wrapper width and setting the parent container to overflow-scroll.

So the solution: I had set the wrapper width to wider than my slide/table (940px is my slider so I set wrapper to 1480). I also set overflow on the parent container and it finally worked however before I set it for mobile devices only it was creating a scroll bar with extra space on desktop so I modified desktop to 940px wrapper (remover overflow-scroll) and ipad to mobile devices only to 1480 (with overflow-scroll) - this removed scroll bar and extra space on desktop while being perfect for mobile. YAYYYYY!