Shopify themes, liquid, logos, and UX
Hi All, is it possible to make the multicolumn section auto slide on mobile? see below, any help appreciated, thank you.
Hi,
Add CSS to style multicolumn section for horizontal scrolling.
Use JavaScript for auto-sliding effect.
Example of css code
@media only screen and (max-width: 767px) {
.multicolumn-container {
display: flex;
overflow: hidden;
white-space: nowrap;
}
.multicolumn-item {
flex: 0 0 auto;
width: 100%;
box-sizing: border-box;
}
}
Example of javascript code
document.addEventListener("DOMContentLoaded", function() {
const sliderContainer = document.querySelector('.multicolumn-container');
const sliderItems = document.querySelectorAll('.multicolumn-item');
let currentIndex = 0;
const slideDuration = 3000; // Duration of each slide in milliseconds
function slide() {
if (sliderContainer && sliderItems.length > 0) {
sliderContainer.style.transition = 'transform 1s ease-in-out';
sliderContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
currentIndex = (currentIndex + 1) % sliderItems.length;
setTimeout(slide, slideDuration);
}
}
slide();
});
Thank you! where can I add the javascript code?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024