I can not in any way make the pictures on the slides be the same size and do not change the size during scrolling.

Here is the code:

<div class="carousel-inner"> <div class="item active"> <img width="2000" height="800" class="cerousel-imeges" src="images/universe.jpg" alt=""> </div> <div class="item"> <img width="2000" height="800" class="cerousel-imeges" src="images/universe2.jpg" alt=""> </div> <div class="item"> <img src="images/universe3.jpg" alt=""> </div> </div>

Maybe it's better to ask them some class and put it separately in the style.css file? I tried it - I can't do it like this. Could you show how this is done?

In addition, the buttons for selecting the desired image are moved to the very bottom of the page. enter image description here

    1 answer 1

    Add height: 800px !important; if you need it that way.

    For example:

     .carousel-inner img { display: block; width: 600px; height: 350px !important; margin: 0 auto; } 
     <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 class="container"> <!-- Слайдер --> <div id="carousel" class="carousel slide"> <!-- Индикаторы слайдов --> <ol class="carousel-indicators"> <!-- Активный индикатор--> <li class="active" data-target="#carousel" data-slide-to="0"></li> <!-- Неактивные индикаторы --> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Слайды --> <div class="carousel-inner"> <div class="item active"> <img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt=""> <div class="carousel-caption"> <h3>Первый слайд</h3> <p>Описание первого слайда</p> </div> </div> <div class="item"> <img src="http://media.gettyimages.com/photos/cosmos-flowers-in-full-bloom-picture-id467213949?k=6&m=467213949&s=170667a&w=0&h=y5trnQg5YGRZ8hiJQdpHW3fI2QsyPk547IslOsA2zuQ=" alt=""> <div class="carousel-caption"> <h3>Второй слайд</h3> <p>Описание первого слайда</p> </div> </div> <div class="item"> <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <div class="carousel-caption"> <h3>Третий слайд</h3> <p>Описание первого слайда</p> </div> </div> </div> <!-- Стрелки переключения слайдов --> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>

    Or, just in case, the option with background pictures (so that the images look more beautiful):

     .item-img { width: 600px; height: 350px; background-repeat: no-rpeat; background-position: center; -webkit-background-size: cover; background-size: cover; margin: 0 auto; } 
     <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 class="container"> <!-- Слайдер --> <div id="carousel" class="carousel slide"> <!-- Индикаторы слайдов --> <ol class="carousel-indicators"> <!-- Активный индикатор--> <li class="active" data-target="#carousel" data-slide-to="0"></li> <!-- Неактивные индикаторы --> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Слайды --> <div class="carousel-inner"> <div class="item active"> <div class="item-img" style="background-image: url(http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg);"></div> <!-- <img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt=""> --> <div class="carousel-caption"> <h3>Первый слайд</h3> <p>Описание первого слайда</p> </div> </div> <div class="item"> <div class="item-img" style="background-image: url(http://media.gettyimages.com/photos/cosmos-flowers-in-full-bloom-picture-id467213949?k=6&m=467213949&s=170667a&w=0&h=y5trnQg5YGRZ8hiJQdpHW3fI2QsyPk547IslOsA2zuQ="></div> <!-- <img src="http://media.gettyimages.com/photos/cosmos-flowers-in-full-bloom-picture-id467213949?k=6&m=467213949&s=170667a&w=0&h=y5trnQg5YGRZ8hiJQdpHW3fI2QsyPk547IslOsA2zuQ=" alt=""> --> <div class="carousel-caption"> <h3>Второй слайд</h3> <p>Описание первого слайда</p> </div> </div> <div class="item"> <div class="item-img" style="background-image: url(http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div> <!-- <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> --> <div class="carousel-caption"> <h3>Третий слайд</h3> <p>Описание первого слайда</p> </div> </div> </div> <!-- Стрелки переключения слайдов --> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>

    • Thanks, helped! And do not tell me why the buttons for switching the picture can be shifted? An example of what I am talking about is given in the addendum to the question. - faoxis
    • It would be necessary to check the height in all blocks of the slider! So I will not say, you need to watch - HamSter