ブートストラップ・カルーセル・アニメーションを停止する方法

アプリケーション・フォームを作成しようとしていますが、まずカルーセルが動かないようにする必要があります。代わりに、特定のボタンが押されたときに移動するようにします「次のページ」または「最後のページ」）。ここでブートストラップ・カルーセル・アニメーションを停止する方法

は私のコードです：私はブートストラップに新しいですと

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>Application Page one</title> 

<!-- Bootstrap Core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<!-- Custom CSS --> 
<link href="css/modern-business.css" rel="stylesheet"> 

<!-- Custom Fonts --> 
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

</head> 

<body> 

<!-- Navigation --> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">SERVER NAME</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="apply.html">Apply</a> 
       </li> 
       <li> 
        <a href="staff.html">Staff</a> 
       </li> 
       <li> 
        <a href="faq.html">FAQ</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact us</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

<br> 
<div id="carousel-example-generic" class="carousel slide" data-pause="false" 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" role="listbox"> 
     <div class="item active"> 
      <center> 
       <h3>Declaration:</h3> 
       <p>The providers ("we", "us", "our") of the service provided by this web site ("Service") are not responsible for any user-generated content and accounts ("Content"). Content submitted express the views of their author only.</p> 

       <p>You agree to not use the Service to submit or link to any Content which is defamatory, abusive, hateful, threatening, spam or spam-like, likely to offend, contains adult or objectionable content, contains personal information of others, 
        risks copyright infringement, encourages unlawful activity, or otherwise violates any laws.</p> 

       <p>All Content you submit or upload may be reviewed by staff members. All Content you submit or upload may be sent to third-party verification services (including, but not limited to, spam prevention services). Do not submit any Content 
        that you consider to be private or confidential.</p> 

       <p>We reserve the rights to remove or modify any Content submitted for any reason without explanation. Requests for Content to be removed or modified will be undertaken only at our discretion. We reserve the right to take action against 
        any account with the Service at any time.</p> 

       <p>You are granting us with a non-exclusive, permanent, irrevocable, unlimited license to use, publish, or re-publish your Content in connection with the Service. You retain copyright over the Content.</p> 

       <p>These terms may be changed at any time without notice.</p> 

       <p>If you do not agree with these terms, please do not register or use this Service. If you wish to close your account, please contact us.</p> 
      </center> 
     </div> 
     <div class="item"> 
      <form class="form-horizontal" style="width: 80%; padding-left: 150px;"> 
       <fieldset> 
        <h4 style="padding-left: 235px;">Applcation Part 1 - Some information about you:</h4> 
        <div class="form-group"> 
         <label for="inputFN" class="col-lg-2 control-label">First Name:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputFN" placeholder="First name"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputLN" class="col-lg-2 control-label">Last Name:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputLN" placeholder="Last name"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputEmail" class="col-lg-2 control-label">Email Address:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputEmail" placeholder="Email"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputAge" class="col-lg-2 control-label">Age:</label> 
         <div class="col-lg-10"> 
          <select class="form-control" id="select"> 
           <option>Select your age</option> 
           <option>------------------------------------------------------</option> 
           <option>1</option> 
           <option>2</option> 
           <option>3</option> 
           <option>4</option> 
           <option>5</option> 
           <option>6</option> 
           <option>7</option> 
           <option>8</option> 
           <option>9</option> 
           <option>10</option> 
           <option>11</option> 
           <option>12</option> 
           <option>12</option> 
           <option>13</option> 
           <option>14</option> 
           <option>15</option> 
           <option>16</option> 
           <option>17</option> 
           <option>18</option> 
           <option>19</option> 
           <option>20</option> 
           <option>21</option> 
           <option>22</option> 
           <option>23</option> 
           <option>24</option> 
           <option>25</option> 
           <option>26</option> 
           <option>27</option> 
           <option>28</option> 
           <option>29</option> 
           <option>30</option> 
          </select> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputDOB" class="col-lg-2 control-label">Date of birth:</label> 
         <div class="col-lg-10"> 
          <select class="form-control" id="select1"> 
           <option>Day</option> 
           <option>------------------------------------------------------</option> 
           <option>1</option> 
           <option>2</option> 
           <option>3</option> 
           <option>4</option> 
           <option>5</option> 
           <option>6</option> 
           <option>7</option> 
           <option>8</option> 
           <option>9</option> 
           <option>10</option> 
           <option>11</option> 
           <option>12</option> 
           <option>12</option> 
           <option>13</option> 
           <option>14</option> 
           <option>15</option> 
           <option>16</option> 
           <option>17</option> 
           <option>18</option> 
           <option>19</option> 
           <option>20</option> 
           <option>21</option> 
           <option>22</option> 
           <option>23</option> 
           <option>24</option> 
           <option>25</option> 
           <option>26</option> 
           <option>27</option> 
           <option>28</option> 
           <option>29</option> 
           <option>30</option> 
           <option>31</option> 
          </select> 
         </div> 
         <div class="col-lg-10" style="padding-left: 250px; width: 100%;"> 
          <select class="form-control" id="select2"> 
           <option>Month</option> 
           <option>------------------------------------------------------</option> 
           <option>1</option> 
           <option>2</option> 
           <option>3</option> 
           <option>4</option> 
           <option>5</option> 
           <option>6</option> 
           <option>7</option> 
           <option>8</option> 
           <option>9</option> 
           <option>10</option> 
           <option>11</option> 
           <option>12</option> 
           <option>12</option> 
          </select> 
         </div> 
         <div class="col-lg-10" style="padding-left: 250px; width: 100%;"> 
          <select class="form-control" id="select3"> 
           <option>Year</option> 
           <option>------------------------------------------------------</option> 
           <option>1986</option> 
           <option>1987</option> 
           <option>1988</option> 
           <option>1989</option> 
           <option>1990</option> 
           <option>1991</option> 
           <option>1992</option> 
           <option>1993</option> 
           <option>1994</option> 
           <option>1995</option> 
           <option>1996</option> 
           <option>1997</option> 
           <option>1998</option> 
           <option>1999</option> 
           <option>2000</option> 
           <option>2001</option> 
           <option>2002</option> 
           <option>2003</option> 
           <option>2004</option> 
           <option>2005</option> 
           <option>2006</option> 
           <option>2007</option> 
           <option>2008</option> 
           <option>2009</option> 
           <option>2010</option> 
           <option>2011</option> 
           <option>2012</option> 
           <option>2013</option> 
           <option>2014</option> 
           <option>2015</option> 
           <option>2016</option> 
          </select> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputSkype" class="col-lg-2 control-label">Skype:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputSkype" placeholder="Skype"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputMCU" class="col-lg-2 control-label">Minecraft Username:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputMCU" placeholder="Minecraft Username"> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

<center> 
    <a href="#carousel-example-generic" class="right btn btn-primary" style="padding-left: -5px;" data-slide="prev">Last Page</a> 
    <a href="#carousel-example-generic" class="right btn btn-primary" data-slide="next">Next Page</a> 
</center> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script> 
     $("#carousel").carousel({ 
      pause: false 
      wrap: false 
     }) 
    </script> 

</body> 

</html>

誰かが、コードを助けてくださいことはできますか？

出典

2016-06-18 Jacob Lane

これを使用してコードをJS：

<script> 
    $("#carousel").carousel({ 
     pause: false, // don't forget the colon here, it's an object 
     interval: false, 
     wrap: false 
    }) 
</script>

出典

2016-06-18 17:08:20 Greg01re

私はあなたのコードを使用しますが、カルーセルはまだ追加し、独自の –

試しに動いていますdata-interval = "false" – Greg01re

あなたがこれはあなたが探しているもので動作しますBootstrap Docs

$('.carousel').carousel({ 
 
    interval: false 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<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> 
 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="//lorempixel.com/1600/900" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//lorempixel.com/1600/900" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//lorempixel.com/1600/900" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//lorempixel.com/1600/900" 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" 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>

出典

2016-06-18 17:13:38 dippas

を見てみinterval: false使用することができます。コード構造に従って、次の手順を実行します。

1.カルーセル用の再生ボタンと一時停止ボタンを追加すると、表示または操作したいページをより適切に制御できます。それらを追加する最善の方法は、最後と次のページボタンの隣にあります。

<center> 
<a href="#carousel-example-generic" class="left btn btn-primary" style="padding-left: -5px;" data-slide="prev">Last Page</a> 
<a href="#carousel-example-generic" class="right btn btn-primary" data-slide="next">Next Page</a> 

<!-- adding the play and pause button for the carousel using JQuery --> 
<div class="btn-group" id="carouselButtons"> 
    <button class="btn btn-danger btn-lg" id="carousel-pause"> 
     <span class="glyphicon glyphicon-pause" aria-hidden="true"></span> 
    </button> 
    <button class="btn btn-danger btn-lg" id="carousel-play"> 
     <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
    </button> 
</div>

2.-以下のスクリプトは、任意のフレームに開始および停止を制御する必要があります：

<script> 
     $('#carousel-play').click(function() {$('#carousel-example- generic').carousel('cycle');}); 

     $('#carousel-pause').click(function(){$('#carousel-example-generic').carousel('pause');}); 

</script>

出典

2016-06-18 22:16:17 Jocelyn

ブートストラップ・カルーセル・アニメーションを停止する方法

答えて

関連する問題