Carousel в Bootstrap v3.3.1 не работает

Я новичок в начальной загрузки, я начал разработку веб-сайта с использованием начальной загрузки, вот код, который я использовал для Carousel, но изображения не скользит, любая помощь будет оцененаCarousel в Bootstrap v3.3.1 не работает

Это мой HTML разметки

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Microvillage Communications</title> 
<link rel="shortcut icon" type="image/png" href="Images/favicon.png"> 
<link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
<link href="Css/style.css" rel="stylesheet" type="text/css"> 
</head> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/jquery-1.11.2.min.js"></script> 

</head> 

<body> 
<div class="container"> 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2"> 
<div class="row topmargin"> 
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8 "><img class="img-responsive" src="Images/microvillage logo.jpg" width="360" height="60" alt=""/></div><!-- logo_container ends here--> 
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4"> 
<ul class="list-inline topmargin"> 
<li ><img class="img-rounded img-responsive" src="Images/facebookicon.png" width="30" height="30" alt=""/></li> 
<li><img class="img-rounded img-responsive" src="Images/twitter.png" width="30" height="30" alt=""/></li> 

<li><img class="img-rounded img-responsive" src="Images/linkedin.png" width="30" height="30" alt=""/></li> 

<li><img class="img-rounded img-responsive" src="Images/google+.png" width="30" height="30" alt=""/></li> 

<li><img class="img-rounded img-responsive" src="Images/youtube.png" width="30" height="30" alt=""/></li> 
</ul> 
</div><!-- container for social media--> 

<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
<ul class="nav nav-justified menu_bac"> 
<li class="active"><a href="#">Home</a></li> 
<li><a href="#">Company</a></li> 
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> 
     Products <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu" role="menu"> 
     ... 
    </ul> 
</li> 
<li><a href="#">Support</a></li> 
<li><a href="#">Solution</a></li> 
<li><a href="#">Services</a></li> 
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Enquiry<span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu"></ul> 
</li> 




</ul> 
</div> 
</div><!-- row ends here--> 
</div><!-- row ends here--> 

<div class="col-sm-12 col-md-12 col-lg-12"> 
<div id="carousel" class="carousel slide" data-ride="carousel"> 
    <!-- Menu --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel" data-slide-to="1"></li> 
     <li data-target="#carousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Items --> 
    <div class="carousel-inner"> 

     <div class="item active"> 
      <img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" /> 
     </div> 
     <div class="item"> 
      <img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" /> 
     </div> 
     <div class="item"> 
      <img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" /> 
     </div> 
    </div> 
    <a href="#carousel" class="left carousel-control" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a href="#carousel" class="right carousel-control" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

</div><!-- container for image slide--> 
</div> 
</div><!-- row ends here--> 
</div><!-- container-fluid end here--> 
</body> 
</html>

, кажется, я не хватает JQuery плагинов, но не смог найти причину именно

источник

2014-12-22 Sandeep Siddanna Kumbar

Ваша структура не совсем соответствие с бутстраповской каруселью, и вам не нужно, чтобы добавить любой дополнительные js для карусели просто используют правильную структуру карусели g IVEN в bootstrap, и ваша карусель будет работать

рабочий пример: http://jsfiddle.net/juddlyon/Q2TYv/10/

// invoke the carousel 
 
$('#myCarousel').carousel({ 
 
    interval: 3000 
 
}); 
 

 
/* SLIDE ON CLICK */ 
 

 
$('.carousel-linked-nav > li > a').click(function() { 
 

 
    // grab href, remove pound sign, convert to number 
 
    var item = Number($(this).attr('href').substring(1)); 
 

 
    // slide to number -1 (account for zero indexing) 
 
    $('#myCarousel').carousel(item - 1); 
 

 
    // remove current active class 
 
    $('.carousel-linked-nav .active').removeClass('active'); 
 

 
    // add active class to just clicked on item 
 
    $(this).parent().addClass('active'); 
 

 
    // don't follow the link 
 
    return false; 
 
}); 
 

 
/* AUTOPLAY NAV HIGHLIGHT */ 
 

 
// bind 'slid' function 
 
$('#myCarousel').bind('slid', function() { 
 

 
    // remove active class 
 
    $('.carousel-linked-nav .active').removeClass('active'); 
 

 
    // get index of currently active item 
 
    var idx = $('#myCarousel .item.active').index(); 
 

 
    // select currently active item and add active class 
 
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active'); 
 

 
});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css'); 
 

 
#myCarousel { 
 
    margin-top: 40px; 
 
} 
 

 
.carousel-linked-nav, 
 
.item img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.carousel-linked-nav { 
 
    width: 120px; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script> 
 
<div id="myCarousel" class="carousel slide"> 
 
    <!-- Carousel items --> 
 
    <div class="carousel-inner"> 
 
    <div class="active item"> 
 
     <img src="http://placehold.it/300x200/888&text=Item 1" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/300x200/aaa&text=Item 2" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/300x200/444&text=Item 3" /> 
 
    </div> 
 
    </div> 
 
    <!-- Carousel nav --> 
 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
 
</div> 
 

 
<!-- LINKED NAV --> 
 
<ol class="carousel-linked-nav pagination"> 
 
    <li class="active"><a href="#1">1</a></li> 
 
    <li><a href="#2">2</a></li> 
 
    <li><a href="#3">3</a></li> 
 
</ol>

источник

2014-12-22 07:00:41 Innodel

thanku его работает отлично –

всегда приветствуются :) – Innodel

Carousel в Bootstrap v3.3.1 не работает

ответ

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