Stacking Bootstrap carousel items on mobile? -
I am using a bootstrap carousel to cycle through the sub-sections of a page. Although it fits perfectly on the big screen, on mobile I like to display sub-squares only one after another. Is this possible?
So, for example (to clarify)
About this section, there is a carousel on the desktop which is the mission, the cycle through contact, and the next / previous button Customer list with
On mobile I want one of those three parts on the other and you normally scroll to them; No next / previous button.
Thank you.
I managed to do this easily by overriding bootstraps default style on the carousel item with the media query Last:
@ media (max-width: 767px) {#myCarousel {.item {display: block; Padding-bottom: 10px; }}} This carousel takes .item s, normally is set to display: any unless . Active and after each other shows them with a small padding. It does not disable or suspend the bootstrap's carousel behavior, but if you hide the carousel-indicator and any carousel navigation, then there is no way to access that behavior. It may not be the most beautiful solution, but it works.
Comments
Post a Comment