2014-09-23 2 views
0

Как вы думаете, в чем проблема?Bootstrap Карусель не работает должным образом

<html> 
    <head> 
    <meta charset="utf-8"> <!-- for character ">>" --> 
    <!-- solve problem for icon's flat UI --> 

    <title>Welcome!</title> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/bootstrap.min.css" rel="stylesheet">  
    <link href="css/bootstrap-theme.css" rel="stylesheet"> 
    <link href="css/bootstrap-theme.min.css" rel="stylesheet"> 
    <script src="javascript/jquery.js"> </script> 
    <script src="javascript/jquery.validate.min.js"> </script> 
    <script src="javascript/jquery-ui-1.9.2.custom.min.js"></script> 
    <script src="javascript/bootstrap.js"></script> 
    <script src="javascript/carousel.js"></script> 
    </head> 

    <body> 

    . . . . 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <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> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
    <img src="..." alt="..."> 
    <div class="carousel-caption"> 
    ... 
    </div> 
    </div> 
    <div class="item"> 
    <img src="..." alt="..."> 
    <div class="carousel-caption"> 
    ... 
    </div> 
    </div> 
    ... 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div> 

Он не показывает точную карусель. Вместо этого он показывает некоторые недостающие ссылки, но имеет функции прокрутки. Связано ли это с .js и .css, которые должны быть включены? Есть идеи?

+0

'' ... проблема. '...' не образ. Также убедитесь, что вы инициализировали свою карусель. Я хочу указать, что вы включили больше ссылок, чем вам нужно. Например, 'css/bootstrap.css' и' css/bootstrap.min.css' - это то же самое ('.min' просто означает, что все компактно, чтобы сэкономить место). Также кажется, что вы включили jQuery дважды. –

ответ

1

Это похоже на точный код с сайта начальной загрузки. В любом случае, причина, почему недостающие звенья показывают для вас в этом коде, потому что вам нужно на самом деле путь, установленным для источника изображения

... 
<div class='item'> 
    <img src='<!-- whatever the path to your image is -->'> <!-- this is what is missing --> 
    <div class='carousel-caption'> 
    </div> 
    ... 

Кроме того, я хотел бы изменить идентификатор вашей карусели к чему-то, что имеет смысл для вашей веб-страницы, и это легко отслеживать для вас. При выполнении не забудьте изменить атрибут «href» на элементах управления, чтобы он соответствовал идентификатору нового идентификатора карусели. В противном случае, если она прокручивается и такая, то, похоже, вы правильно настроили ее. Просто убедитесь, что вы действительно добавляете путь для своих изображений.

0

Используйте это в вашем коде, надеюсь, что это может полезно

Вы должны initilize с помощью этого:

$('.carousel').carousel() 
Смежные вопросы