2015-08-22 3 views
1

J'ai essayé de suivre les liens ci-dessous mais en vain, il ne glisse toujours pas.Carousel Slider redirige vers # carousel-example-generic

Trying to add carousel to webpage without redirecting

J'ai aussi essayé de mettre à jour mon jQuery comme dit ici.

Bootstrap Carousel Slider not working

Voici ce que je travaille sur.

<!-- Carousel --> 
<script> 
    $(document).ready(function(){ 
    $('.carousel').carousel({ 
     interval: 3000 
    }) 
    });  
</script> 


<div style="width:60%; 
      margin-left:20%; 
      margin-right:20%; 

"> 

<h1>Welcome to the GlassEngine Company Homepage</h1> 

</div> 

<div style="width:60%; 
      margin-left:45%; 
      margin-right:20%; 

"> 
<h3>Enjoy your stay!</h3> 


</div> 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" align="center"> 
    <!-- 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> 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="<?php echo base_url() ?>/images/fslide01.jpg" alt="..."> 
     <div class="carousel-caption"> 
     <h3>Leaves</h3> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="<?php echo base_url() ?>/images/fslide02.jpg" alt="..."> 
     <div class="carousel-caption"> 
     Awesome Statue 
     </div> 
    </div> 

    <div class="item"> 
     <img src="<?php echo base_url() ?>/images/fslide03.jpg" alt="..."> 
     <div class="carousel-caption"> 
     Horse 
     </div> 
    </div> 
    <div class="item"> 
     <img src="<?php echo base_url() ?>/images/fslide04.jpg" alt="..."> 
     <div class="carousel-caption"> 
     Scenery 
     </div> 
    </div> 
    <div class="item"> 
     <img src="<?php echo base_url() ?>/images/fslide05.jpg" alt="..."> 
     <div class="carousel-caption"> 
     Animals 
     </div> 
    </div> 

    </div> 

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

J'ai aussi le code suivant dans mon tag <head>

<!-- Latest compiled and minified JavaScript --> 
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script> 
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap-theme.min.css"> 

J'ai aussi essayé d'enlever le / après la echo, mais toujours pas différent.

<!-- Latest compiled and minified JavaScript --> 
<script src="<?php echo base_url() ?>js/bootstrap.min.js"></script> 
<script src="<?php echo base_url() ?>js/jquery-2.1.4.min.js"> </script> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap-theme.min.css"> 

Répondre

0

Donc, il se trouve que je chargeais bootstrap avant jquery. Donc, le code approprié serait le suivant:

<!-- Latest compiled and minified JavaScript --> 
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script> 
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script> 

Cas fermé.