Steuerung Bootstrap Karussell Folien mit Tasten

Question

Ich möchte die Rolle dieses Karussells mit Menü-Leiste, wo gibt es Schaltflächen 1,2,3,4,5, wenn ich klicken Sie das Karussell sollte schieben auf die zweite Folie oder 3. Folie wie das .

Ich habe HTML, Bootstrap, CSS verwendet.

<div class="container-fluid"> 

    <div class="row" id="row1"> 
     <div class="col-sm-12" style="top: 10%; bottom: 50%;"> 
      <h1>AS</h1> 
     </div> 
    </div> 

    <div class="row" id="row2"> 
     <div class="col-sm-4" style="top: 10%; bottom: 50%; background-color: white; height: 7.4vh"> 
      <h1 style="color: black">AS</h1> 
     </div> 
     <div class="col-sm-8" style="top: 10%; bottom: 50%; background-color: black"> 
      <div class="nav"> 
       <ul> 
        <li class="contact"><a href="#one">1</a></li> 
        <li class="contact1"><a href="two">2</a></li> 
        <li class="about"><a href="#three">3</a></li> 
        <li class="about1"><a href="#four">4</a></li> 
        <li class="tutorials"><a href="#five">5</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="row" id="row3"> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox" style="vertical-align: top; position: absolute; background-color:green"> 
       <div class="item active" id="one"> 
        <h1>ABC</h1> 
       <div class="item" id="two"> 
        <img src="img/B.jpg" alt="Chania"> 
       </div> 

       <div class="item" id="three"> 
        <img src="img/C.jpg" alt="Flower"> 
       </div> 

       <div class="item" id="four"> 
        <img src="img/C.jpg" alt="Flower"> 
       </div> 

       <div class="item" id="five"> 
        <img src="img/C.jpg" alt="Flower"> 
       </div> 
      </div> 

      <!-- Left and right controls --> 
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon glyphicon-menu-left" aria-hidden="true"></span> 
      </a> 
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span> 
      </a> 
     </div> 

    </div> 

    <div class="row" id="row4"> 
     <div class="col-sm-12" style="top: 10%; bottom: 50%;"> 
      <button class="button" onclick="Contact">Contact</button> 
     </div> 
    </div> 

</div> 

Answer 1

Ich bin mir nicht sicher ... Bitte überprüfen. Wollen Sie das erreichen?

1. können Sie Bilder in unterschiedlichen Folien.

2. Verwenden Sie dann the .click() method, um das JavaScript-Ereignis click zu behandeln.

3. Nennet the .carousel(number) method:

   Cycles das Karussell auf einem bestimmten Rahmen (0 basiert, ähnlich einem Array).

Siehe auch:

• the .eq() method

  Reduzieren des Satzes von abgestimmten Elementen zu der einen am angegebenen Index.

• the .index() method

  Wenn kein Argument an die .index() Methode übergeben wird, ist der Rückgabewert eine ganze Zahl ist, die Position des ersten Elements innerhalb des Objekts relativ jQuery angibt seiner Geschwisterelemente.

• the .find() method

  Holen Sie sich die Nachkommen < ...> durch einen Selektor gefiltert < ...>

• the .children() method

  Holen Sie sich die Kinder von jedem Element in der Menge der passenden Elemente, optional fil durch einen Selektor

• the .parent() method

  < ...> quert auf die unmittelbar Eltern jedes dieser Elemente in dem DOM-Baum und erstellt ein neues Objekt jQuery aus den passenden Elementen.
  < ...> reist eine einzelne Ebene den DOM-Baum hinauf.

• the .prev() method

  Holen Sie sich das unmittelbar vorangehenden Geschwister < ...>

Zum Beispiel: http://codepen.io/glebkema/pen/qayLYY

var myCarousel = $('#myCarousel'); 
 
var myNav = myCarousel.prev(); 
 

 
myNav.find('li > a').click(function() { 
 
    var newIndex = $(this).parent().index(); 
 
    myCarousel.carousel(newIndex); 
 
}); 
 

 
myCarousel.on('slid.bs.carousel', function() { 
 
    var newIndex = $(this).find('.carousel-inner>.active').index(); 
 
    var newLI = myNav.children().eq(newIndex); 
 
    if (!newLI.hasClass('active')) { 
 
    myNav.find('li.active').removeClass('active'); 
 
    newLI.addClass('active'); 
 
    } 
 
});

/* Make the images wide and responsive. */ 
 
.carousel-inner img { 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
/* Count nav-pills */ 
 
.nav { 
 
    counter-reset: number; 
 
    padding: 12px 0; 
 
} 
 
.nav > li > a:before { 
 
    content: counter(number); 
 
    counter-increment: number; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 

 
    <ul class="nav nav-pills"> 
 
    <li role="presentation" class="active"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    <li role="presentation"><a href="#"></a></li> 
 
    </ul> 
 

 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="//placehold.it/900x300/c69/fff/?text=1" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/9c6/fff/?text=2" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/69c/fff/?text=3" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/c33/fff/?text=4" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/099/fff/?text=5" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="//placehold.it/900x300/f93/fff/?text=6" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>