I want to create an image carousel where on desktop the image (or images) are all on screen but on mobile the image (or images) overflow the container and the user can swipe the image left and right to see it all. Below is an example of what I have in mind. The slider component I don’t think will work because it animates from one slide to the next where I want the user to have full control of the image pan.
Here is my public share link: LINK
(how to access public share link)
You could try setting overflow-x to scroll.
Keep the images the size you want inside the overflow block, and they should shoot off your page, and then they can be scrolled left to right.
Awesome, that worked perfectly. Any idea how to hide the scrollbar on the div in Safari? I tried passing in some code but didn’t have any luck.
/* Hide scrollbar for Chrome, Safari and Opera */
.cs-3up-phoneRow::-webkit-scrollbar {
display: none;
}
Hm. that should work. Can you post your site read only link?
Sure thing. See anything I’m doing wrong here?
I saw in your CSS you had width: width: 0; which would have caused some issues. Try the code below. That should cover any possible scrollbar not showing. I haven’t tested it on a live site, but try publishing your site and testing.
<style>
.cs-3up-phoneRow::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
background: transparent;
}
.cs-3up-phoneRow {
overflow: -moz-scrollbars-none;
-ms-overflow-style: none; }
</style>
Still no luck. I wonder if it has something to do with this tooltip notification in the webflow interface
Just wanted to check, are you testing on a live site or in the previewed? And is it on mobile or computer?
I’m publishing it to the free/temporary Webflow hosted site, but not just previewing it so it does read other code that I have. Issue is on desktop and mobile. It’s not a huge deal if i have to have a scroll bar.