Wie man ein Karussell in Bootstrap mit Knopf navigiert?

Ich habe den folgenden Code,Wie man ein Karussell in Bootstrap mit Knopf navigiert?

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="https://code.jquery.com/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 

<input type="button" id="myButton" value="click"/> 



<div class="container"> <!--for carousel --> 
<div class="well"> 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 

    <div class="carousel-inner"> 
    <div class="item active" id="first_carousel">      

       <a href="#carousel-example-generic" role="button" data-slide="next" id="next_carousel" class="pull-right"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 


    </div><!-- First Carousel --> 

    <div class="item" id="second_carousel"><!-- Second Carousel --> 

      <a class="col-xs-1" href="#carousel-example-generic" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 

      <strong>My Details</strong>   


    </div><!-- Second Carousel --> 


</div> 
</div> 

</div> <!-- Well --> 
</div> <!-- Container --> 


</body> 
</html>

Wenn der Benutzer auf die Schaltfläche klickt, ich auf den zweiten Schlitten des Karussells navigieren möchten. Ich habe versucht action = "# second_slide", aber es hat nicht funktioniert. Gibt es eine andere Problemumgehung mit jQuery oder Bootstrap?

Hier ist, was ich so weit gekommen - http://jsbin.com/difawayufa/edit?html,output

Quelle

2016-04-07 Kemat Rochi

: http: // www Wenn Sie bestimmte Folie gehen möchten, können Sie den Index des Dia verwenden können. w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h Bitte beziehen Sie sich darauf. Dies half Ihnen. – smraj

@ Smraj - Das ist zu einfach. Wie auch immer, ich habe aus der Antwort unten herausgefunden, wonach ich gesucht habe. –

Sie dies mit folgendem mit jquery tun können:

<input type="button" id="myButton" value="click" onclick=" $('#carousel-example-generic').carousel('next');"/>

Sie auch verwenden können: $ ('# Karussell-Beispiel-generic ') .karussell (' prev ');

Wenn Sie zur vorherigen Folie gehen wollen

EDIT:

<input type="button" id="myButton" value="click" onclick=" $('#carousel-example-generic').carousel(1);"/>

Quelle

2016-04-07 08:58:35 Kypaz

Aber wenn ich noch einmal auf den Knopf klicke, kommt es zurück zu Slide-1. Ich möchte, dass der Knopf nur zum nächsten wechselt - wenn ich ihn das zweite Mal anklicke, sollte er selbst auf diesem bleiben. Ist das in jQuery möglich? –

Sie können die ID verwenden: Es wird gehen nur auf die zweite Folie – Kypaz

Funktioniert wie ein Zauber. Du hast mein Leben gerettet. Ich danke dir sehr :) –

Wie man ein Karussell in Bootstrap mit Knopf navigiert?

Antwort

Verwandte Themen