Swiper - Slider Specific Width with Overflow-Scroll Help

[Stazzyboo (Staz)]

Hey guys! 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 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 slide on side scroll, arrows scroll one by one.

I want to only view one slide on mobile with overflow side scroll since grid is oversizes on purpose.

---

Ready only: Webflow - Anastasia Stallcop Portfolio

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

[Stazzyboo (Staz)]

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!