Custom Bootstrap 5 carousel on mobile (multiple items, but not in one row)
P粉763662390
P粉763662390 2023-09-05 11:53:56
0
1
496

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.

有什么想法吗?干杯(并对糟糕的英语表示歉意)。

P粉763662390
P粉763662390

reply all (1)
P粉029057928

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

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!