Carousel слайд портя постоянно

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- The above 3 meta tags *must* come first in the head; any other head  content must come *after* these tags --> 
<title>Carousel slide</title> 

<!-- Bootstrap --> 
<link href="styles/b/bootstrap.min.css" rel="stylesheet"> 
<link rel ="stylesheet" href= "css/main.css"> 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script> 
<![endif]--> 
</head> 
<body> 


<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    </ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
    <img src="img/mountain.jpg" alt="Mountain"> 
    <div class="carousel-caption"> 
    <h3>Mountain</h3> 
    <p>Lovely picture of a mountain.</p> 
    </div> 
    </div> 

<div class="item"> 
    <img src="img/sunset.jpg" alt="sunset"> 
    <div class="carousel-caption"> 
    <h3>Sunset</h3> 
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
    </div> 
    </div> 


<!-- Left and right controls --> 
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button"  data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 
</div> 


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

Это результат изображения я получаю. Я понятия не имею, что я делаю неправильно. Может кто-то помочь, пожалуйста. Мне также необходимо:Carousel слайд портя постоянно

есть фон, охватывающий всю страницу, в то время как контент по-прежнему остается в центральной области.
сделать стрелки прокрутки маленькими и над изображением?
авто прокручивается

источник

2015-11-16 User199932

Какие ошибки вы получаете в консоли? – j08691

загружаемый шрифт: скачать не удалось (font-family: «Glyphicons Halflings» style: normal weight: normal stretch: normal src index: 1): status = 2147500037 источник: файл: /// C:/Users/Kosio/Desktop/Web % 20Проекты/Карусель% 20Slider% 20Boot% 20Kishav/styles/fonts/glyphicons-halflings-regular.woff2 Ошибка в анализируемом значении для 'background-image'. Декларация опустилась. bootstrap.min.css: 11: 126805 Ожидаемая функция «none», URL или фильтр, но найденная «progid». Ошибка в анализируемом значении для «фильтра». Декларация опустилась. – User199932

Первого: У вас есть </div> отсутствует ниже ваши вторые .item дел. О, я забыл: у вас есть пробел в вашем URL-адресе jQuery до /jquery.min.js, который следует удалить.

Для достижения делает изображение по центру и высота всегда то же самое (первая точка):

#myCarousel { 
    height: 256px; 
} 

#myCarousel img { 
    max-height: 256px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.carousel-inner { 
    text-align: center; 
}

Он прокручивает автоматически по умолчанию, чтобы изменить интервал добавить data-interval="<yourspeed>" либо к вашему .carousel ДИВ FPR все изображения или каждый .item div для получения разных интервалов для каждого изображения. Это был ваш третий пункт.

Второй я не понимаю.

JSFiddle

источник

2015-11-16 16:21:45

Моя основная проблема заключается в том, что веб-сайт по-прежнему отображается, как я показал на изображении выше. Я не могу найти способ исправить это. – User199932

Я исправил эту проблему. Это было с правильным размещением файла шрифтов. Также спасибо за помощь в CSS!

источник

2015-11-16 17:09:41 User199932

Carousel слайд портя постоянно

ответ

Смежные вопросы