Search code examples
javascripttwitter-bootstrap-3carousel

How to destroy a Bootstrap Carousel for mobile resolutions

Is it possible to remove a bootstrap carousel (V 3.0.0 ) just when the resolution is below 768?

I used to do it on CaroufredSel plugin but doesn't seem to work on bootstrap.

I am showing 4 elements per slide, but if i set the #myCarousel to display:block; i get one element below the other but only 4 elements are shown.

EDIT

Seems my question was missunderstood, I do not want to remove the elements or the carousel, i want to remove the functionality of the carousel itself, so the 12 elements overflow and are shown in block one below the other.

Solution

  • I solved it with jQuery using the following

    $("#myCarousel .carousel-inner > .item").css("display","block");

    So using a viewport when the resolution is below 768px i set all the carousel item to display block, overriding the default display none that bootstrap applies.

    Posting the answer in order to help someone else with the same situation.