I'm having trouble trying to customize the carousel layout on mobile devices. I want it to show every item of the carousel on mobile instead of just one, but after trying some CSS and JS, specifically using display float< /code> or max-witdh I'm just starting to think this isn't possible or I don't know where to look/look at the wrong location/attribute. I've included two images so you can see what I'm trying to achieve.
What I want to achieve:
What I have:
The example html code is very basic, I'm not including CSS as this is just for design purposes.
I think similar questions and cases have been answered before in another thread. I found some references that might be helpful to you and I'll give you some links.Another thread in stackoverflow
You can also use the following JS code:
$('.multi-item-carousel').carousel({ interval: false }); // for every slide in carousel, copy the next slide's item in the slide. // Do the same for the next, next item. $('.multi-item-carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } });Disclaimer: These answers/code snippets are not mine. I got it from Maurice melchers'https://codepen.io/mephysto/pen/ZYVKRY