In general, such a snag. Images from the slider and switches (black marks, when you click on which the picture is replaced) are not shown in the mobile resolution. The block itself is with them and takes place, but is not displayed. Who can tell what the problem is?

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/portfolio_slide_1.jpg" alt="1"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="images/portfolio_slide_2.jpg" alt="2"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="images/portfolio_slide_3.jpg" alt="3"> <div class="carousel-caption"> </div> </div> </div> </div>
  • um, what would the problem say is to look at the code. - Vyacheslav Danshin

1 answer 1

Check the connection styles. Check that your styles do not interrupt indicator styles.

Everything works with any resolution:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="1"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="2"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="3"> <div class="carousel-caption"> </div> </div> </div> </div>