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?
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024